<template>
  <div @click="filterChangeRef.gradeAndClassOpen = false">
    <!-- 学生信息管理 -->
    <!-- 表单查询 -->
    <div class="top">
      <Form
        ref="formRef"
        class="ant-advanced-search-form"
        :model="where"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="margin-right: 24px"
        @finish="onFinish"
      >
        <Row :gutter="[16, 1]">
          <!-- 姓名 -->
          <Col :span="6">
            <Form.Item label="姓名">
              <a-input
                v-model:value="where.name"
                autocomplete="off"
                placeholder="请输入"
                :maxlength="30"
                allow-clear
              >
              </a-input>
            </Form.Item>
          </Col>
          <!-- 性别 -->
          <Col :span="6">
            <Form.Item label="性别">
              <a-select
                ref="select"
                v-model:value="where.gender"
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                allow-clear
              >
                <a-select-option value="男">男</a-select-option>
                <a-select-option value="女">女</a-select-option>
              </a-select>
            </Form.Item>
          </Col>
          <!-- 年级 -->
          <Col :span="6">
            <Form.Item label="年级/班级">
              <FilterChange ref="filterChangeRef" />
            </Form.Item>
          </Col>
          <!-- 班级 -->
          <!-- <Col :span="6"> </Col> -->

          <!-- 学生状态 -->
          <Col :span="6">
            <Form.Item label="学生状态">
              <a-select
                ref="select"
                v-model:value="where.studentStatus"
                placeholder="请选择"
                allow-clear
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="
                  () => {
                    if (where.studentStatus === 1) {
                      where.dormitoryId = null;
                      where.dormitoryRoomId = [];
                    }
                  }
                "
              >
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="1">走读</a-select-option>
                <a-select-option :value="0">住宿</a-select-option>
                <!-- <a-select-option :value="">其他</a-select-option> -->
              </a-select>
            </Form.Item>
          </Col>
          <!-- 宿舍楼 -->
          <Col :span="6">
            <Form.Item label="宿舍楼">
              <a-select
                ref="select"
                v-model:value="where.dormitoryId"
                :disabled="where.studentStatus === 1"
                placeholder="请选择"
                allow-clear
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                @change="onChangeDormitory"
              >
                <a-select-option
                  v-for="(item, index) of optionList.dormitoryList"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}
                </a-select-option>
              </a-select>
            </Form.Item>
          </Col>

          <!-- 房间名称 -->
          <Col :span="6">
            <Form.Item label="房间名称">
              <a-cascader
                v-model:value="where.dormitoryRoomId"
                :disabled="where.studentStatus === 1"
                :options="optionList.roomList"
                placeholder="请选择"
                allow-clear
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                :load-data="onLoadDataRoom"
                :field-names="{ label: 'name', value: 'id' }"
                @change="onChangeRoom"
              />
            </Form.Item>
          </Col>
          <!-- 学段名称 -->
          <!-- <Col :span="6">
            <Form.Item label="学段">
              <a-cascader
                v-model:value="where.classIdList"
                :disabled="where.studentStatus === 1"
                :options="optionList.sectionList"
                placeholder="请选择"
                allow-clear
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                :load-data="onLoadDataClass"
                :field-names="{ label: 'name', value: 'id' }"
                @change="onChangeClassNew"
              />
            </Form.Item>
          </Col> -->

          <!-- 分配状态 -->
          <!-- <Col :span="6">
            <Form.Item label="分配状态">
              <a-select
                ref="select"
                v-model:value="where.allocationStatus"
                :disabled="where.studentStatus === 1"
                placeholder="请选择"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
                allow-clear
              >
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="0">未分配</a-select-option>
                <a-select-option :value="1">已分配</a-select-option>
              </a-select>
            </Form.Item>
          </Col> -->

          <Col :span="12" style="text-align: right">
            <div class="search">
              <div class="search-btn">
                <a-button type="primary" class="z-btn-32" @click="onFinish">查询</a-button>
                <a-button style="margin: 0 0 0 16px" ghost class="z-btn-32" @click="resetFormData"
                  >重置
                </a-button>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    </div>
    <!-- 列表 -->
    <div class="below">
      <div v-if="stateUser.identity === 8" class="search">
        <div class="search-btn-left">
          <a-button
            type="primary"
            style="margin-right: 16px"
            :disabled="isStudentCheckOut"
            @click="onAccommodationTap"
          >
            新增住宿信息
          </a-button>
          <a-button
            type="primary"
            style="margin-right: 16px"
            :disabled="isStudentCheckOut"
            ghost
            @click="onExchange('bed')"
          >
            床位调换
          </a-button>
          <a-button
            type="primary"
            style="margin-right: 16px"
            :disabled="isStudentCheckOut"
            ghost
            @click="onExchange('dormitory')"
            >宿舍调换
          </a-button>
          <a-button
            type="primary"
            :disabled="tuisu"
            style="margin-right: 16px"
            @click="studentCheckOutTap"
            >退宿
          </a-button>
        </div>
        <div class="search-btn-right">
          <a-button
            type="primary"
            style="margin-right: 16px"
            :disabled="isStudentCheckOut"
            ghost
            class="icon-btn-box btn-global-green-ghost"
            @click="batchAccommodationTap"
          >
            <span class="iconfont-wid ifont-wid-fi_edit-3 icon-btn"></span>
            <span>批量标记住宿学生</span>
          </a-button>
          <a-button
            type="primary"
            :disabled="isStudentCheckOut"
            ghost
            class="icon-btn-box"
            @click="accommodationExport.visible = true"
          >
            <span class="iconfont-wid ifont-wid-u_file-download-alt icon-btn"></span>
            <span>批量导入住宿信息</span>
          </a-button>
        </div>
      </div>
      <!-- 表格 -->
      <div>
        <!-- :data-source="tableData.records" -->
        <a-table
          :row-selection="
            stateUser.identity !== 8 && stateUser.classInfoList !== []
              ? undefined
              : { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
          "
          :columns="columns"
          :data-source="tableData.records"
          :row-key="record => record.studentUserId"
          :pagination="false"
          :loading="loading"
          :scroll="{ x: 1300 }"
        >
          <!-- <template v-slot:emptyText>{{ loading ? '' : '暂无数据' }}</template> -->
          <template v-slot:emptyText>
            <div class="zz-global-nodata">
              <img
                v-if="searchStatus * 1 === 0"
                src="@/assets/images/accommodation/default-no-data.png"
                alt=""
              />
              <img v-else src="@/assets/images/accommodation/no-data-search-new.png" alt="" />
            </div>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'dormitoryName'">
              <Tooltip
                :overlay-style="{ whiteSpace: 'normal' }"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                placement="topLeft"
                :title="record.dormitoryName || '--'"
              >
                <p
                  style="
                    width: 108px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  {{ record.dormitoryName || '--' }}</p
                >
              </Tooltip>
            </template>
            <template v-if="column.dataIndex === 'dormitoryRoomName'">
              {{ record.dormitoryRoomName || '--' }}
            </template>
            <template v-if="column.dataIndex === 'bedNumber'">
              {{ record.bedNumber ? record.bedNumber + '号床' : '--' }}
            </template>
            <template v-if="column.dataIndex === 'studentStatus'">
              <!-- {{ record.studentStatus === 0 ? '住宿' : record.studentStatus === 1 ? '走读' : '--' }} -->
              <span v-if="record.studentStatus === 0" class="z-gray-color">住宿</span>
              <span v-if="record.studentStatus === 1" class="z-green-color">走读</span>
              <span v-if="record.studentStatus !== 0 && record.studentStatus !== 1">--</span>
            </template>
            <!-- <template v-if="column.dataIndex === 'allocationStatus'">
              {{
                record.allocationStatus === 0
                  ? '未分配'
                  : record.allocationStatus === 1
                  ? '已分配'
                  : '其他'
              }}
              {{
                record.studentStatus === 0
                  ? record.allocationStatus === 0
                    ? '未分配'
                    : record.allocationStatus === 1
                    ? '已分配'
                    : '其他'
                  : '--'
              }}
              <span v-if="record.studentStatus === 0">
                <span v-if="record.allocationStatus === 0" class="z-red-color">未分配</span>
                <span v-if="record.allocationStatus === 1" class="z-gray-color">已分配</span>
                <span
                  v-if="record.allocationStatus !== 0 && record.allocationStatus !== 1"
                  class="z-gray-color"
                  >其他</span
                >
              </span>
              <span v-else class="z-gray-color">--</span>
            </template> -->
            <template v-if="column.dataIndex === 'action'">
              <a-button size="small" ghost class="z-btn-24" @click="onStundentDeta(record)"
                >查看</a-button
              >
            </template>
          </template>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <span style="color: #999999; margin-right: 8px">共{{ tableData.pages }}页</span>
        <a-pagination
          v-model:current="tableData.current"
          v-model:pageSize="tableData.size"
          :page-size-options="pageSizeOptions"
          show-quick-jumper
          :total="tableData.total"
          :show-size-changer="true"
          @change="onChangePagination"
        />
      </div>
    </div>
    <!-- 新增住宿信息弹窗 -->
    <my-dialog
      :dialog-state="add.visible"
      :dialog-title="add.title"
      :dialog-width="add.width"
      :icon-type="add.iconType"
      :btn-loading="btnLoading"
      @handleCancel="onAccommodationCancel"
      @handleOk="onAccommodationCreate"
    >
      <template v-slot:location>
        <ul class="add-room-dialog">
          <!-- 学生姓名 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">学生姓名：</span>
            </div>
            <a-input
              :value="formDataCreate.name"
              autocomplete="off"
              placeholder="请选择"
              @click="onFramework"
            ></a-input>
            <!-- <a-select
              ref="select"
              v-model:value="formDataCreate.classId"
              placeholder="请选择"
              allow-clear
              @change="onChangeClass"
            >
              <a-select-option v-for="(item, index) of 1" :key="index" :value="item">{{
                item
              }}</a-select-option>
            </a-select> -->
          </li>
          <!-- 宿舍楼 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">宿舍楼：</span>
            </div>
            <a-select
              ref="select"
              v-model:value="formDataCreate.dormitoryId"
              placeholder="请选择"
              allow-clear
              @change="changeAddlow"
            >
              <a-select-option
                v-for="(item, index) of formDataCreateOption.dormitoryList"
                :key="index"
                :value="item.dormitoryId"
                @click="dormitorySelect(item)"
                >{{ item.dormitoryName }}
              </a-select-option>
            </a-select>
          </li>
          <!-- 房间名称 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">房间名称：</span>
            </div>
            <a-select
              ref="select"
              v-model:value="formDataCreate.dormitoryRoomName"
              placeholder="请选择"
              allow-clear
            >
              <a-select-option
                v-for="(item, index) of formDataCreateOption.dormitoryRoomList"
                :key="index"
                :value="item.id"
                @click="dormitoryRoom(item)"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </li>
          <!-- 床位数 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">床位：</span>
            </div>
            <a-select
              ref="select"
              v-model:value="formDataCreate.bedNumber"
              placeholder="请选择"
              allow-clear
            >
              <a-select-option
                v-for="item of formDataCreateOption.bedNumberList"
                :key="item.id"
                :value="item.bedNumber"
                @click="selectBed(item)"
                >{{ item.bedNumber }}号床
              </a-select-option>
            </a-select>
          </li>
        </ul>
      </template>
      <!-- 选人组织架构 -->
    </my-dialog>
    <!-- 床位调换弹窗 -->
    <my-dialog
      :dialog-state="bedChange.visible"
      :dialog-title="bedChange.title"
      :dialog-width="bedChange.width"
      :type="type"
      :icon-type="bedChange.iconType"
      :btn-loading="btnLoading"
      @handleCancel="onCancelExchange"
      @handleOk="onExchangeSubmit"
    >
      <template v-slot:location>
        <div v-if="bedChange.type === 'bed'">
          <div class="dialog-max-height-userinfo">
            <div v-for="(item, index) of formDataExchange" :key="index" class="student-select">
              <Row style="margin-bottom: 16px">
                <Col :span="8" style="text-align: center">位置1</Col>
                <Col :span="8" style="text-align: center" :offset="8">位置2</Col>
              </Row>
              <Row :align="'middle'" style="margin-bottom: 16px">
                <Col :span="8">
                  <div class="dialog-img" style="margin: 0 auto">
                    <img
                      v-if="!item.swapSource.studentUserId && !item.swapSource.bedNumber"
                      src="@/assets/images/accommodation/popup_btn_add.png"
                      alt=""
                      @click="onSelectStudent('swapSource', index)"
                    />

                    <div v-else class="dialog-img" style="position: relative">
                      <img
                        v-if="item.swapSource.studentAvatar"
                        :src="item.swapSource.studentAvatar"
                        alt=""
                      />
                      <img v-else src="@/assets/images/accommodation/icon_big.png" alt="" />
                      <div class="dialog-img-del" @click="onDelStudent('swapSource', index)">
                        <img
                          src="@/assets/images/accommodation/fi_trash-2.png"
                          alt=""
                          style="width: 16px; height: 16px; color: #fff"
                        />
                      </div>
                    </div>
                  </div>
                </Col>
                <Col :span="8">
                  <img
                    style="margin: 0 auto"
                    src="@/assets/images/accommodation/popup_icon_zhunhuan.png"
                    alt=""
                  />
                </Col>
                <Col :span="8">
                  <div class="dialog-img" style="margin: 0 auto">
                    <img
                      v-if="!item.swapTarget.studentUserId && !item.swapTarget.bedNumber"
                      src="@/assets/images/accommodation/popup_btn_add.png"
                      alt=""
                      @click="onSelectStudent('swapTarget', index)"
                    />
                    <div v-else class="dialog-img" style="position: relative">
                      <img
                        v-if="item.swapTarget.studentAvatar"
                        :src="item.swapTarget.studentAvatar"
                        alt=""
                      />
                      <img v-else src="@/assets/images/accommodation/icon_big.png" alt="" />
                      <div class="dialog-img-del" @click="onDelStudent('swapTarget', index)">
                        <img
                          src="@/assets/images/accommodation/fi_trash-2.png"
                          alt=""
                          style="width: 16px; height: 16px; color: #fff"
                        />
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
              <Row style="margin-bottom: 16px">
                <Col :span="8" style="text-align: center">
                  <p>{{ item.swapSource.studentName }}&nbsp; {{ item.swapSource.className }}</p>
                  <p
                    >{{ item.swapSource.dormitoryName }} {{ item.swapSource.roomName }}
                    <span v-if="item.swapSource.bedNumber">{{
                      item.swapSource.bedNumber + '号床'
                    }}</span>
                  </p>
                </Col>
                <Col :span="8" style="text-align: center" :offset="8">
                  <p
                    >{{ item.swapTarget && item.swapTarget.studentName }}&nbsp;
                    {{ item.swapTarget.className }}</p
                  >
                  <p
                    >{{ item.swapTarget.dormitoryName }} {{ item.swapTarget.roomName }}
                    <span v-if="item.swapTarget.bedNumber">{{
                      item.swapTarget.bedNumber + '号床'
                    }}</span>
                  </p>
                </Col>
              </Row>
              <div v-if="index > 0" style="position: absolute; top: 0; right: 0; cursor: pointer">
                <Popconfirm
                  title="确定要删除吗?"
                  ok-text="确定"
                  cancel-text="取消"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  @confirm="confirm(index)"
                >
                  <img
                    src="@/assets/images/accommodation/fi_trash-2.png"
                    alt=""
                    style="width: 16px; height: 16px; color: #fff"
                  />
                </Popconfirm>
              </div>
            </div>
          </div>

          <!-- 添加位置调换按钮 -->
          <div class="dialog-add" @click="formDataExchangeCreate">
            <PlusOutlined />
          </div>
        </div>
        <div v-else>
          <div class="dialog-max-height-userinfo">
            <div
              v-for="(item, index) of formDataExchangeDormitory"
              :key="index"
              class="student-select"
            >
              <Row style="margin-bottom: 16px">
                <Col :span="8" style="text-align: center">位置1</Col>
                <Col :span="8" style="text-align: center" :offset="8">位置2</Col>
              </Row>
              <Row :align="'middle'" style="margin-bottom: 16px">
                <Col :span="8">
                  <div class="dialog-img" style="margin: 0 auto">
                    <img
                      v-if="!item.swapSource.dormitoryId && !item.swapSource.id"
                      src="@/assets/images/accommodation/popup_btn_add.png"
                      alt=""
                      @click="onSelectStudent('swapSource', index)"
                    />

                    <div v-else class="dialog-img" style="position: relative">
                      <img src="@/assets/images/accommodation/icon_big.png" alt="" />
                      <div class="dialog-img-del" @click="onDelStudent('swapSource', index)">
                        <img
                          src="@/assets/images/accommodation/fi_trash-2.png"
                          alt=""
                          style="width: 16px; height: 16px; color: #fff"
                        />
                      </div>
                    </div>
                  </div>
                </Col>
                <Col :span="8">
                  <img
                    style="margin: 0 auto"
                    src="@/assets/images/accommodation/popup_icon_zhunhuan.png"
                    alt=""
                  />
                </Col>
                <Col :span="8">
                  <div class="dialog-img" style="margin: 0 auto">
                    <img
                      v-if="!item.swapTarget.dormitoryId && !item.swapTarget.id"
                      src="@/assets/images/accommodation/popup_btn_add.png"
                      alt=""
                      @click="onSelectStudent('swapTarget', index)"
                    />
                    <div v-else class="dialog-img" style="position: relative">
                      <img src="@/assets/images/accommodation/icon_big.png" alt="" />
                      <div class="dialog-img-del" @click="onDelStudent('swapTarget', index)">
                        <img
                          src="@/assets/images/accommodation/fi_trash-2.png"
                          alt=""
                          style="width: 16px; height: 16px; color: #fff"
                        />
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
              <Row style="margin-bottom: 16px">
                <Col :span="8" style="text-align: center">
                  <p v-if="item.swapSource.dormitoryId && item.swapSource.id"
                    >{{ item.swapSource.dormitoryName }} {{ item.swapSource.name }} ({{
                      item.swapSource.bedNum
                    }}人间)
                  </p>
                </Col>
                <Col :span="8" style="text-align: center" :offset="8">
                  <p v-if="item.swapTarget.dormitoryId && item.swapTarget.id"
                    >{{ item.swapTarget.dormitoryName }} {{ item.swapTarget.name }} ({{
                      item.swapTarget.bedNum
                    }}人间)
                  </p>
                </Col>
              </Row>
              <div v-if="index > 0" style="position: absolute; top: 0; right: 0; cursor: pointer">
                <Popconfirm
                  title="确定要删除吗?"
                  ok-text="确定"
                  cancel-text="取消"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  @confirm="confirm(index)"
                >
                  <img
                    src="@/assets/images/accommodation/fi_trash-2.png"
                    alt=""
                    style="width: 16px; height: 16px; color: #fff"
                  />
                </Popconfirm>
              </div>
            </div>
          </div>

          <!-- 添加位置调换按钮 -->
          <div class="dialog-add" @click="formDataExchangeCreate">
            <PlusOutlined />
          </div>
        </div>
      </template>
    </my-dialog>
    <!-- 床位调换人员选择弹窗 -->
    <my-dialog
      :dialog-state="bedchoiceForm.visible"
      :dialog-title="bedchoiceForm.title"
      :dialog-width="bedchoiceForm.width"
      :icon-type="bedchoiceForm.iconType"
      :dialog-class="'bedchoice-dialog-box'"
      :btn-loading="btnLoading"
      @handleCancel="onCancel"
      @handleOk="onSubmit"
    >
      <template v-slot:location>
        <!-- <div class="campus">清华</div> -->
        <div v-if="bedChange.type === 'bed'" class="content">
          <div class="option">
            <a-tabs v-model:activeKey="tabsValue" @change="callback">
              <a-tab-pane :key="1" :tab="'班级'">
                <div style="height: 400px; overflow: auto; width: 100%">
                  <a-radio-group v-model:value="selectStudentValue[0]">
                    <Menu
                      v-model:openKeys="openStudentValue"
                      v-model:selectedKeys="selectStudentValue"
                      style="width: 250px"
                      mode="inline"
                      @click="onClickClass"
                    >
                      <Menu.SubMenu v-for="(item, index) of classListOption" :key="index">
                        <!-- <template #icon>
                      <DownOutlined />
                    </template> -->
                        <template #title>{{ item.sectionName }}</template>
                        <Menu.SubMenu
                          v-for="(itemChild, indexChild) of item.gradleList"
                          :key="itemChild.gradeId"
                        >
                          <template #title>{{ itemChild.gradleName }}</template>
                          <Menu.Item
                            v-for="(elem, key) of itemChild.classList"
                            :key="`${index}-${indexChild}-${key}`"
                            :value="elem.classId"
                          >
                            <a-radio :value="`${index}-${indexChild}-${key}`" />
                            <span>{{ elem.className }}</span>
                          </Menu.Item>
                        </Menu.SubMenu>
                      </Menu.SubMenu>
                    </Menu>
                  </a-radio-group>
                </div>
              </a-tab-pane>
              <a-tab-pane :key="2" :tab="'宿舍'">
                <div style="height: 400px; overflow: auto; width: 100%">
                  <Col :span="22">
                    <a-input
                      v-model:value="formState.search"
                      autocomplete="off"
                      placeholder="请输入您的搜索内容"
                      :maxlength="30"
                      @keyup.enter="onSearch(formState.search)"
                    >
                      <template #prefix
                        ><img src="@/assets/images/accommodation/jiaoxue_icon_sousuo.png" alt=""
                      /></template>
                    </a-input>
                  </Col>
                  <a-radio-group v-model:value="selectRoomValue[0]">
                    <Menu
                      v-model:openKeys="openRoomValue"
                      v-model:selectedKeys="selectRoomValue"
                      style="width: 250px"
                      mode="inline"
                      @click="onRoomDetails"
                    >
                      <Menu.SubMenu v-for="(item, index) of dormitoryListOption" :key="item.id">
                        <!-- <template #icon>
                      <DownOutlined />
                    </template> -->
                        <template #title>{{ item.name }}</template>
                        <Menu.SubMenu
                          v-for="(elem, key) of item.storeyList"
                          :key="`${item.id}-${elem.id}`"
                          :disabled="item.existStoreyList?.indexOf(elem.id) === -1"
                          @click="
                            onClickRoomOption(
                              item.id,
                              elem.id,
                              index,
                              key,
                              item.existStoreyList?.indexOf(elem.id) === -1
                            )
                          "
                        >
                          <!-- <template #icon>
                      <DownOutlined />
                    </template> -->
                          <template #title>{{ elem.id }}楼</template>
                          <template
                            v-if="item.existStoreyList?.indexOf(elem.id) === -1"
                            #expandIcon
                          ></template>
                          <Menu.Item v-for="room in elem.roomList" :key="room.id" :value="room.id">
                            <a-radio :value="room.id" />
                            <Tooltip
                              :overlay-style="{ whiteSpace: 'normal' }"
                              :get-popup-container="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                              placement="topLeft"
                              :title="room.name"
                            >
                              {{ room.name }}
                            </Tooltip>
                          </Menu.Item>
                        </Menu.SubMenu>
                      </Menu.SubMenu>
                    </Menu>
                  </a-radio-group>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div v-if="tabsValue === 1" class="detailsStudent" style="height: 464px; overflow: auto">
            <a-radio-group v-model:value="onRadioStudent">
              <div v-for="(item, index) of formDataStudentList" :key="index">
                <div class="info">{{ item.gender === '男' ? '男生' : '女生' }}</div>
                <div class="info-content">
                  <ul style="display: flex; flex-wrap: wrap">
                    <li
                      v-for="(elem, key) of item.people"
                      :key="key"
                      class="flex"
                      style="width: 50%"
                    >
                      <a-radio :value="elem.studentUserId" />
                      <!--  style="align-items: center" -->
                      <div class="flex" style="align-items: center">
                        <img
                          v-if="elem.studentAvatar"
                          :src="elem.studentAvatar"
                          alt=""
                          style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px"
                        />
                        <img
                          v-else
                          src="@/assets/images/accommodation/icon_big.png"
                          alt=""
                          style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px"
                        />
                        <div style="font-size: 14px; color: #222222; width: 100px">
                          {{ elem.studentName }}
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </a-radio-group>
          </div>
          <div v-else class="details">
            <a-radio-group v-model:value="onRadioRoom" @change="onChangeRadioStudent()">
              <div class="info">详情</div>
              <div class="info-content" style="padding: 24px 0px; box-sizing: border-box">
                <ul style="height: 352px; overflow: auto; width: 100%">
                  <li
                    v-for="(item, index) of formDataRoomDetails"
                    :key="index"
                    style="margin-left: 24px"
                  >
                    <a-radio :value="item" style="margin-right: 70px"
                      >{{ item.bedNumber }}号床
                    </a-radio>
                    <div
                      v-if="item.isEmploy == 1"
                      style="display: flex; align-items: center; font-size: 14px; color: #222222"
                    >
                      <img
                        v-if="item.studentAvatar"
                        :src="item.studentAvatar"
                        alt=""
                        style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px 0 0"
                      />
                      <img
                        v-else
                        src="@/assets/images/accommodation/icon_big.png"
                        alt=""
                        style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px 0 0"
                      />
                      <div style="margin-right: 8px">{{ item.studentName }}</div>
                      <div>{{ item.className }}</div>
                    </div>
                    <div
                      v-else
                      style="display: flex; align-items: center; font-size: 14px; color: #fe8f8f"
                    >
                      <!-- <span v-if="item.isEmploy == 1">已分配</span> -->
                      <span>未分配</span>
                    </div>
                  </li>
                </ul>
              </div>
            </a-radio-group>
          </div>
        </div>
        <div v-else class="content">
          <div
            class="option dormitory"
            style="padding: 16px; width: 310px; height: 400px; overflow: auto"
          >
            <Col>
              <a-input
                v-model:value="formState.search"
                autocomplete="off"
                placeholder="请输入您的搜索内容"
                :maxlength="30"
                @keyup.enter="onSearch(formState.search)"
              >
                <template #prefix
                  ><img src="@/assets/images/accommodation/jiaoxue_icon_sousuo.png" alt=""
                /></template>
              </a-input>
            </Col>
            <a-radio-group v-model:value="selectDormitoryRoomValue[0]">
              <Menu
                v-model:openKeys="openDormitoryRoomValue"
                v-model:selectedKeys="selectDormitoryRoomValue"
                style="width: 256px"
                mode="inline"
                @click="onClickDormitoryRoom"
              >
                <Menu.SubMenu v-for="(item, index) of dormitoryListOption" :key="item.id">
                  <!-- <template #icon>
                      <DownOutlined />getDormitoryRoomList
                    </template> -->
                  <template #title>{{ item.name }}</template>
                  <Menu.SubMenu
                    v-for="(elem, key) of item.storeyList"
                    :key="`${item.id}-${elem.id}`"
                    :title="`${elem.id}楼`"
                    :disabled="item.existStoreyList?.indexOf(elem.id) === -1"
                    @titleClick="
                      onClickRoomOption(
                        item.id,
                        elem.id,
                        index,
                        key,
                        item.existStoreyList?.indexOf(elem.id) === -1
                      )
                    "
                  >
                    <!-- <template #icon>
                      <DownOutlined />
                    </template> -->
                    <!-- <template #title>{{ elem.id }}楼</template> -->
                    <template
                      v-if="item.existStoreyList?.indexOf(elem.id) === -1"
                      #expandIcon
                    ></template>
                    <Menu.Item v-for="room in elem.roomList" :key="room.id" :value="room">
                      <a-radio :value="room.id" />
                      <Tooltip
                        :overlay-style="{ whiteSpace: 'normal' }"
                        :get-popup-container="
                          triggerNode => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
                        placement="topLeft"
                        :title="room.name + ' ' + room.bedNum + '人间'"
                      >
                        {{ room.name }}（{{ room.bedNum }}人间）
                      </Tooltip>
                    </Menu.Item>
                  </Menu.SubMenu>
                </Menu.SubMenu>
              </Menu>
            </a-radio-group>
          </div>
        </div>
      </template>
    </my-dialog>
    <!-- 退宿 提示框 -->
    <my-dialog
      :dialog-state="checkOut.visible"
      :dialog-title="checkOut.title"
      :dialog-width="checkOut.width"
      :icon-type="checkOut.iconType"
      :btn-loading="btnLoading"
      @handleCancel="handleCancelCheckOut"
      @handleOk="onSubmitStudentCheckOut"
    >
      <template v-slot:location>
        <div class="checkOutStyle">
          <img src="@/assets/images/accommodation/drawable-xxxhdpi_popu_icon_warn.png" alt="" />
          <span>{{ checkOut.content }}</span>
        </div>
        <p v-if="checkOut.state" class="checkOut-notes"
          >注：此动作将会清除已选内容所有住宿信息，请谨慎操作。</p
        >
      </template>
    </my-dialog>
    <!-- 不同类型房间不能互换温馨提示 -->
    <my-dialog
      :dialog-state="tip.visible"
      :dialog-title="tip.title"
      :dialog-width="tip.width"
      :icon-type="tip.iconType"
      @handleCancel="tip.visible = false"
      @handleOk="tip.visible = false"
    >
      <template v-slot:location>
        <div class="tipStyle">
          <img src="@/assets/images/accommodation/drawable-xxxhdpi_popu_icon_warn.png" alt="" />
          <span>不同类型房间不可互换，请重新选择。</span>
        </div>
      </template>
    </my-dialog>
    <!-- 批量导入住宿信息 温馨提示 -->
    <my-dialog
      :dialog-state="tipImport.visible"
      :dialog-title="tipImport.title"
      :dialog-width="tipImport.width"
      :icon-type="tipImport.iconType"
      :btn-loading="btnLoading"
      @handleCancel="tipImport.visible = false"
      @handleOk="tipImport.visible = false"
    >
      <template v-slot:location>
        <div v-if="true" class="tipStyle">
          <img src="@/assets/images/accommodation/popu_icon_success.png" alt="" />
          <span>批量导入完成！</span>
        </div>
        <div v-else class="tipStyle">
          <img src="@/assets/images/accommodation/drawable-xxxhdpi_popu_icon_warn.png" alt="" />
          <span>部分内容导入失败，点击 查看 导入失败反馈</span>
        </div>
      </template>
    </my-dialog>
    <!-- 批量导入住宿信息 弹窗（上传） -->
    <my-dialog
      :dialog-state="accommodationExport.visible"
      :dialog-title="accommodationExport.title"
      :dialog-width="accommodationExport.width"
      :icon-type="accommodationExport.iconType"
      :btn-loading="btnLoading"
      @handleCancel="onCancelUploadFile"
      @handleOk="onUploadFile"
    >
      <template v-slot:location>
        <p
          >模板下载:&nbsp;&nbsp;&nbsp;<span
            style="color: #e3c37f; cursor: pointer"
            @click="onDownloadTemplate"
            >住宿模板</span
          >
        </p>
        <div style="display: flex; margin-top: 10px">
          <p style="margin-right: 10px">文件上传:</p>
          <Upload
            :accept="'.xls,.xlsx'"
            list-type="picture-card"
            action="#"
            :custom-request="httpRequest"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            @change="onChangeUpload"
          >
            <div v-if="fileList.length" class="fileListStyle">{{ fileList[0].name }}</div>
            <div v-else>
              <div>
                <img src="@/assets/images/accommodation/u_plus.png" alt="" style="margin: 0 auto" />
              </div>
            </div>
          </Upload>
        </div>
      </template>
    </my-dialog>
    <!-- 批量导入住宿信息 成功后表格弹窗-->
    <my-dialog
      :dialog-state="errorExportInfo.visible"
      :dialog-title="errorExportInfo.title"
      :dialog-width="errorExportInfo.width"
      :icon-type="errorExportInfo.iconType"
      :btn-loading="btnLoading"
      @handleCancel="errorExportInfo.visible = false"
      @handleOk="errorExportInfo.visible = false"
    >
      <template v-slot:location>
        <p>{{ errorExportList.detail }}</p>
        <a-table
          :columns="columnsTableImport"
          :data-source="errorExportList.errorData"
          :row-key="record => record.id"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'studentIdCard'">
              <div
                style="
                  width: 110px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.studentIdCard"
                >
                  {{ record.studentIdCard }}
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'dormitoryName'">
              <div
                style="
                  width: 110px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.dormitoryName"
                >
                  {{ record.dormitoryName }}
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'dormitoryRoomName'">
              <div
                style="
                  width: 110px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.dormitoryRoomName"
                >
                  {{ record.dormitoryRoomName }}
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'reason'">
              <div
                style="
                  width: 110px;
                  font-size: 14px;
                  color: #222222;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.reason.join('；')"
                >
                  <span>
                    {{ record.reason.join('；') }}
                  </span>
                </Tooltip>
              </div>
            </template>
          </template>
        </a-table>
      </template>
    </my-dialog>
    <!-- 批量标记住宿学生/新增住宿选择学生 弹窗 -->
    <my-dialog
      :dialog-state="batchMarking.visible"
      :dialog-title="batchMarking.title"
      :dialog-width="batchMarking.width"
      :icon-type="batchMarking.iconType"
      :btn-state="batchMarking.btnState"
      :btn-loading="btnLoading"
      :z-index="1001"
      @handleCancel="onCancelBatchAccommodation"
      @handleOk="onSubmitBatchAccommodation"
    >
      <template v-slot:location>
        <!-- <div class="campus">清华</div> -->
        <div class="content">
          <div class="option" style="padding: 16px 0; height: 410px; overflow: auto">
            <Menu
              v-model:selectedKeys="selectStudentValue"
              style="width: 256px; margin-left: -4px"
              mode="inline"
              :open-keys="openStudentValue"
              @click="onClickBatcAccommodation"
              @openChange="onOpenChange"
            >
              <Menu.SubMenu
                v-for="(item, index) of filterChangeRef.sectionList"
                :key="item.sectionCode"
                @click.stop="getGradeLists(item, index)"
              >
                <template #title>{{ item.name }}</template>
                <Menu.SubMenu
                  v-for="(itemChild, indexChild) of item.children"
                  :key="itemChild.id"
                  @click.stop="getClassList(itemChild, indexChild, index)"
                >
                  <!-- <template #icon>
                      <DownOutlined />
                    </template> -->
                  <template #title>{{ itemChild.name }}</template>
                  <Menu.Item
                    v-for="(elem, key) of itemChild.children"
                    :key="`${itemChild.id}-${key}`"
                    :value="elem.id"
                    @click.stop
                  >
                    {{ elem.name }}
                  </Menu.Item>
                </Menu.SubMenu>
              </Menu.SubMenu>
            </Menu>
          </div>
          <div class="detailsStudent" style="height: 410px; overflow: auto">
            <a-checkbox-group
              v-if="batchMarking.judge === '2'"
              v-model:value="onCheckboxStudent"
              :default-value="onCheckboxStudent"
              @change="onChangeCheckbox"
            >
              <div v-for="(item, index) of formDataBatchStudentList" :key="index">
                <div class="info" style="display: flex; align-items: center">
                  <input
                    v-model="item.checkAll"
                    type="checkbox"
                    @change="onCheckAllChange(item, $event)"
                  />
                  <span>{{ item.gender === '男' ? '男生' : '女生' }}</span>
                </div>
                <div class="info-content" style="padding: 0 10px 24px">
                  <Row :gutter="[0, 16]">
                    <Col
                      v-for="(elem, key) of item.people"
                      :key="key"
                      class="flex"
                      style="margin-right: 32px; line-height: 32px"
                    >
                      <!-- :disabled="
                          elem.studentStatus === 1 || elem.studentStatus === 0 ? true : false
                        " -->
                      <!-- <div class="flex" style="align-items: center"> -->
                      <a-checkbox
                        :value="elem.studentUserId"
                        @change="checkboxChange(item, $event)"
                      >
                        <div class="flex" style="align-items: center">
                          <img
                            v-if="elem.studentAvatar"
                            :src="elem.studentAvatar"
                            alt=""
                            style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px"
                          />
                          <img
                            v-else
                            src="@/assets/images/accommodation/icon_mrtx.png"
                            alt=""
                            style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px"
                          />
                          <div
                            style="
                              font-size: 14px;
                              color: #222222;
                              width: 60px;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;
                            "
                          >
                            <Tooltip
                              :overlay-style="{ whiteSpace: 'normal' }"
                              :get-popup-container="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                              placement="topLeft"
                              :title="elem.name"
                            >
                              {{ elem.name }}
                            </Tooltip>
                          </div>
                        </div>
                      </a-checkbox>
                      <!-- </div> -->
                    </Col>
                  </Row>
                </div>
              </div>
            </a-checkbox-group>
            <a-radio-group v-else v-model:value="onAddRadioStudent">
              <div v-for="(item, index) of formDataBatchStudentList" :key="index">
                <div class="info">{{ item.gender === '男' ? '男生' : '女生' }}</div>
                <div class="info-content">
                  <Row :gutter="[0, 16]">
                    <Col
                      v-for="(elem, key) of item.people"
                      :key="key"
                      class="flex"
                      style="margin-right: 38px; line-height: 32px"
                    >
                      <!-- :disabled="
                          elem.studentStatus === 1 || elem.studentStatus === 0 ? true : false
                        " -->
                      <a-radio
                        v-model:checked="studentUser"
                        v-model:value="elem.studentUserId"
                        @change="studentUserChange(elem)"
                      />
                      <div class="flex" style="align-items: center">
                        <img
                          v-if="elem.studentAvatar"
                          :src="elem.studentAvatar"
                          alt=""
                          style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px"
                        />
                        <img
                          v-else
                          src="@/assets/images/accommodation/icon_mrtx.png"
                          alt=""
                          style="width: 32px; height: 32px; border-radius: 50%; margin: 0 10px"
                        />
                        <div
                          style="
                            font-size: 14px;
                            color: #222222;
                            width: 60px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                        >
                          <Tooltip
                            :overlay-style="{ whiteSpace: 'normal' }"
                            :get-popup-container="
                              triggerNode => {
                                return triggerNode.parentNode || document.body;
                              }
                            "
                            placement="topLeft"
                            :title="elem.name"
                          >
                            {{ elem.name }}
                          </Tooltip>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </a-radio-group>
          </div>
        </div>
      </template>
    </my-dialog>
    <!-- 查看 个人信息 -->
    <my-dialog
      :dialog-state="personalInfoTap.visible"
      :dialog-title="personalInfoTap.title"
      :dialog-width="personalInfoTap.width"
      :icon-type="personalInfoTap.iconType"
      :footer="false"
      @handleCancel="personalInfoTap.visible = false"
      @handleOk="personalInfoTap.visible = false"
    >
      <template v-slot:location>
        <div class="personal-info">
          <div class="photo">
            <img v-if="personalInfo.studentAvatar" :src="personalInfo.studentAvatar" alt="" />
            <img
              v-else
              src="@/assets/images/accommodation/popup_img_peo.png"
              alt=""
              style="width: 80px; height: 106px"
            />
          </div>
          <div style="width: 81%">
            <Descriptions bordered :column="2" :label-style="labelStyle">
              <Descriptions.Item label="学生姓名">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.name"
                >
                  <p class="descriptionsItemStyle">
                    {{ personalInfo.name || '--' }}
                  </p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="性别">
                <p class="descriptionsItemStyle">{{
                  personalInfo.gender ? (personalInfo.gender === '1' ? '男' : '女') : '--'
                }}</p>
              </Descriptions.Item>
              <!-- :label-style="{ fontSize: '10px' }" -->
              <Descriptions.Item label="学段/年级/班级" :span="3">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.allName"
                >
                  <p class="descriptionsItemStyle">{{ personalInfo.allName || '--' }}</p>
                </Tooltip>
              </Descriptions.Item>
              <!-- <Descriptions.Item label="班级">
                <p class="descriptionsItemStyle">{{ personalInfo.className }}</p>
              </Descriptions.Item> -->
              <Descriptions.Item label="班主任">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.teacherName"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.teacherName ? personalInfo.teacherName : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="班主任电话">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.teacherPhone"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.teacherPhone ? personalInfo.teacherPhone : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="宿舍楼">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.dormitoryName"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.dormitoryName ? personalInfo.dormitoryName : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="房间号">
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="personalInfo.dormitoryRoomName"
                >
                  <p class="descriptionsItemStyle">{{
                    personalInfo.dormitoryRoomName ? personalInfo.dormitoryRoomName : '--'
                  }}</p>
                </Tooltip>
              </Descriptions.Item>
              <Descriptions.Item label="床位">
                <p class="descriptionsItemStyle">{{
                  personalInfo.bedNumber ? personalInfo.bedNumber + '号床' : '--'
                }}</p>
              </Descriptions.Item>
              <Descriptions.Item label="学生状态">
                <p class="descriptionsItemStyle">{{
                  personalInfo.studentStatus === 0
                    ? '住宿'
                    : personalInfo.studentStatus === 1
                    ? '走读'
                    : '--'
                }}</p>
              </Descriptions.Item>
            </Descriptions>
          </div>
        </div>
      </template>
    </my-dialog>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import {
  Form,
  Row,
  Col,
  Descriptions,
  message,
  Upload,
  Popconfirm,
  Menu,
  Tooltip
} from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import MyDialog from '@/components/dialog/index.vue';
import { getRgba } from '@/utils/validate.js';
import FilterChange from '@/components/filterChange/index.vue';
import { debounce } from '@/utils/debounce.js';
import {
  getStudentList,
  importAccommodation,
  locationPick,
  memberList,
  bedExchange,
  existDormitoryList,
  dormitoryExchange,
  studentCheckOut,
  getSchoolId,
  getGradeListBySchoolId,
  getClassListByGradeId,
  getStudentListByClassId,
  saveStay,
  template,
  studentDetail
} from '@/api/studentManage';
import { getDormitoryRoomaNameList } from '@/api/classManage';
import {
  getDormitory,
  floorList,
  floorRoom,
  gradeList,
  classList,
  dormitoryRoomList,
  getRoomAllBedInfo,
  defaultReveal,
  roomList,
  bedList,
  getSectionCodeList,
  gradeListSection,
  gradeListNew
} from '@/api/common';
import { useRouter } from 'vue-router';
const router = useRouter();
const localStorageSchoolId = localStorage.getItem('localStorageSchoolId');
const schoolBaseId = ref(0);
onMounted(async () => {
  getOptionList();
  if (
    localStorageSchoolId === '346001568933441537' ||
    localStorageSchoolId === '221954838718582784'
  ) {
    schoolBaseId.value = 1;
  } else {
    schoolBaseId.value = 0;
  }
});
const store = useStore();
const stateUser = computed(() => store.state.user.STATE_USER);

// console.log('stateUser', stateUser.value);
// stateUser.value.identity !== 8 && stateUser.value.classInfoList !== []; // 班主任权限的时候隐藏选择框
const btnLoading = ref(false);
const rootSubmenuKeys = ref([]);
const onOpenChange = openKeys => {
  // penStudentValue.value = openKeys
  // console.log(openKeys, '444');
  let data = [];
  filterChangeRef.value.sectionList.forEach(item => {
    data.push(item.sectionCode);
  });
  let changeData = openKeys.filter(item => data.includes(item));
  if (changeData.length === 2 && (openKeys.length === 3 || openKeys.length === 2)) {
    openStudentValue.value = [openKeys[openKeys.length - 1]];
  } else if (changeData.length === 1 && openKeys.length === 3) {
    openStudentValue.value = [changeData[0], openKeys[openKeys.length - 1]];
  } else if (changeData.length === 0) {
    openStudentValue.value = openKeys;
  }
  // if (rootSubmenuKeys.value.indexOf(latestOpenKey) === -1) {
  //   openStudentValue.value = openKeys;
  // } else {
  //   openStudentValue.value = latestOpenKey ? [latestOpenKey] : [];
  // }
};
const labelStyle = ref({
  width: '120px'
});

const loading = ref(true);
// const emptyText = ref(''); // loading为true的时候设置为空字符串
/** ***** 新增住宿信息学生选择列表/批量标记住宿学生列表 查询 *******/
// 获取当前学校
function getStudentsList() {
  let schoolId = '';
  getSchoolId().then(res => {
    if (res.data.code === 200) {
      schoolId = res.data.data;
      getGradeLists(schoolId);
    }
  });
}
// 根据学段获取年级列表
function getGradeLists(item, index) {
  // console.log(openStudentValue.value, '4444');
  rootSubmenuKeys.value = [];
  // 如果当前选择只有年级 没有学段 则清空
  if (openStudentValue.value === 1 && !openStudentValue.value.includes(item.sectionCode)) {
    openStudentValue.value = [];
    // console.log(openStudentValue.value, '清空');
    return;
  }
  if (item.children) {
    item.children.forEach(elem => {
      rootSubmenuKeys.value.push(elem.id);
    });
    if (
      !openStudentValue.value.length &&
      rootSubmenuKeys.value.length &&
      !selectStudentValue.value
    ) {
      openStudentValue.value = [item.sectionCode, rootSubmenuKeys.value[0]];
      getClassList(item.children[0], 0, index);
      // console.log(openStudentValue.value, 'openStudentValue.value111 ');
      return;
    }
    if (
      openStudentValue.value.includes(item.sectionCode) &&
      openStudentValue.value.length === 1 &&
      rootSubmenuKeys.value.length
    ) {
      openStudentValue.value = [item.sectionCode, rootSubmenuKeys.value[0]];
      getClassList(item.children[0], 0, index);
      // console.log(openStudentValue.value, 'openStudentValue.value ');
    }

    return;
  }
  gradeListNew(item.sectionCode).then(res => {
    // console.log('这是莎莎', res.data.data);
    if (res.data.code === 200) {
      // GradeIdList.value = res.data.data;
      // GradeIdList.value.forEach(item => {
      //   rootSubmenuKeys.value.push(item.id);
      // });
      let data = [];
      rootSubmenuKeys.value = [];
      res.data.data.forEach(elem => {
        let obj = {
          name: elem.gradeName,
          id: elem.gradeId,
          isLeaf: false
        };
        rootSubmenuKeys.value.push(elem.gradeId);
        data.push(obj);
      });
      filterChangeRef.value.sectionList[index].children = data;
      if (!openStudentValue.value.length && rootSubmenuKeys.value && !selectStudentValue.value) {
        openStudentValue.value = [item.sectionCode, rootSubmenuKeys.value[0]];
        // console.log(openStudentValue.value, 'openStudentValue.value111 ');
        getClassList(item.children[0], 0, index);
        return;
      }
      if (
        openStudentValue.value.includes(item.sectionCode) &&
        openStudentValue.value.length === 1 &&
        rootSubmenuKeys.value.length
      ) {
        openStudentValue.value = [item.sectionCode, rootSubmenuKeys.value[0]];
        getClassList(item.children[0], 0, index);
        // console.log(openStudentValue.value, 'openStudentValue.valu ');
      }
    }
    // 默认展开第一个年级的班级
    // getClassList(rootSubmenuKeys.value[0]);
  });
}
const ClassIdList = ref([]); // 班级列表
// 根据年级ID获取班级列表
function getClassList(itemChild, indexChild, index) {
  onCheckboxStudent.value = [];
  // ------------------------------
  checkboxChangeArr.value = [];
  // ClassIdList.value = [];
  getClassListByGradeId(itemChild.id).then(res => {
    if (res.data.code === 200) {
      // ClassIdList.value = res.data.data;
      let data = [];
      res.data.data.forEach(item => {
        data.push({
          name: item.className,
          id: item.classId,
          isLeaf: true
        });
      });
      filterChangeRef.value.sectionList[index].children[indexChild].children = data;
      // console.log('这是莎莎2', res.data.data);
      selectStudentValue.value = [`${itemChild.id}-0`];
      if (data.length === 0) {
        return;
      }
      getStudentListByClassId(res.data.data[0].classId).then(res => {
        if (res.data.code === 200) {
          formDataBatchStudentList.value = res.data.data;
          formDataBatchStudentList.value.forEach(item => {
            item.checkAll = false;
            if (item.people) {
              // eslint-disable-next-line max-nested-callbacks
              item.people = item.people.filter(i => i.studentStatus === undefined);
            }
          });
        }
      });
    }
  });
}
/** ***** 学生列表查询 *******/
// 学生管理信息查询数据
const where = ref({
  name: null, // 姓名
  gradeId: null, // 年级
  classId: null, // 班级
  dormitoryId: null, // 宿舍楼
  gender: null, // 性别
  dormitoryRoomId: [], // 宿舍楼房间
  studentStatus: null, // 学生状态
  // allocationStatus: null, // 分配状态
  classIdList: [], // 班级-- 多层
  gradeAndClass: [] // 年级班级
});
// 获取学生信息列表
const getStudent = num => {
  // console.log(filterChangeRef.value.gradeAndClass, 'where.value.gradeAndClass');
  // 处理学段年级班级三级筛选数据
  let gradeAndClass = filterChangeRef.value.disposeChangeData();
  // console.log(gradeAndClass, 'gradeAndClass');
  let obj = {
    size: tableData.value.size, // 条数
    current: num || tableData.value.current, // 页码
    data: {
      name: where.value.name, // 姓名
      // gradeId: where.value.gradeId, // 年级
      // classId: where.value.classId, // 班级
      dormitoryId: where.value.dormitoryId, // 宿舍楼
      gender: where.value.gender, // 性别
      dormitoryRoomId: where.value.dormitoryRoomId?.length
        ? where.value.dormitoryRoomId[where.value.dormitoryRoomId.length - 1]
        : null, // 宿舍楼房间
      studentStatus: where.value.studentStatus, // 学生状态
      // allocationStatus: where.value.allocationStatus, // 分配状态
      classIdCondition: gradeAndClass //  学段 年级班级
    }
  };
  loading.value = true;
  getStudentList(obj)
    .then(res => {
      if (res.data.code === 200) {
        tableData.value = res.data.data;
        loading.value = false;
      }
    })
    .catch(err => {
      message.error(err.data.msg || '学生列表获取失败');
      loading.value = false;
    });
};
// 下拉选项列表
const optionList = ref({
  dormitoryList: [],
  gradeList: [],
  classList: [],
  roomList: [],
  sectionList: [] // 学段数组 年级 班级 三级
});
// 获取宿舍楼列表
const getDormitoryList = () => {
  optionList.value.dormitoryList = [];
  optionList.value.roomList = [];
  getDormitory(0).then(res => {
    if (res.data.code === 200) {
      // optionList.value.dormitoryList = res.data.data;
      // optionList.value.roomList = res.data.data;
      if (optionList.value.dormitoryList.length === 0) {
        res.data.data.forEach(element => {
          if (element.dormitoryType * 1 === 0) {
            optionList.value.dormitoryList.push(element);
            optionList.value.roomList.push(element);
          }
        });
      }

      optionList.value.roomList.forEach(elem => {
        elem.isLeaf = false;
      });
      // console.log(
      //   'roomList----------------------------------------------',
      //   optionList.value.roomList
      // );
    }
  });
};
// 获取年级列表
const getGradeList = () => {
  gradeList().then(async res => {
    if (res.data.code === 200) {
      // console.log(stateUser.value);
      // console.log(stateUser.value.classInfoList);
      if (stateUser.value.identity !== 8) {
        // nextTick(() => {
        // console.log(stateUser.value);
        // console.log(stateUser.value.classInfoList);
        let arr = stateUser.value.classInfoList.map(v => v.gradeId);
        let list = [];
        // console.log(arr);
        res.data.data.forEach(v => {
          if (arr.indexOf(v.gradeId) !== -1) list.push(v);
        });
        res.data.data = list;
        // console.log(list);
        // });
      }
      optionList.value.gradeList = res.data.data;
      if (optionList.value.gradeList.length > 0) {
        optionList.value.gradeList.forEach(item => {
          item.name = item.gradeName;
          item.id = item.gradeId;
        });
      }

      // console.log('走这里了吗0哦哦000000', localStorageSchoolId);
      if (stateUser.value.identity !== 8) {
        if (
          localStorageSchoolId === '346001568933441537' ||
          localStorageSchoolId === '221954838718582784'
        ) {
          // console.log('走这里了吗0哦哦', localStorageSchoolId);
          where.value.gradeId = null;
        } else {
          where.value.gradeId = optionList.value.gradeList.length
            ? optionList.value.gradeList[0].gradeId
            : null;
        }

        // onChangeGrade(where.value.gradeId);
        where.value.classId = null;
        optionList.value.classList = [];
        await classList({ gradeId: where.value.gradeId }).then(res => {
          if (res.data.code === 200) {
            // if (stateUser.value.identity !== 8) {
            let arr = stateUser.value.classInfoList.filter(
              v => v.gradeId === where.value.gradeId
            )[0].classIdList;
            // console.log(arr);
            let list = [];
            res.data.data.forEach(v => {
              if (arr.indexOf(v.id) !== -1) list.push(v);
            });
            res.data.data = list;
            // }
            optionList.value.classList = res.data.data;
            where.value.classId = optionList.value.classList.length
              ? optionList.value.classList[0].id
              : null;
          }
        });
      }
      // console.log('获取的年级列表', optionList.value.gradeList);

      optionList.value.gradeList.forEach(item => {
        item.isLeaf = false;
      });
      getStudent();
    }
  });
};

// 根据年级获取班级异步加载 根据学段获取年级
const onLoadDataClass = selectedOptions => {
  // console.log('点击学段里边的年级', selectedOptions);
  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true; // load options lazily
  if (targetOption.sectionName) {
    // console.log('走这-----------');
    gradeListSection(targetOption.id).then(async res => {
      if (res.data.code === 200) {
        // console.log(stateUser.value);
        // console.log(stateUser.value.classInfoList);
        if (stateUser.value.identity !== 8) {
          // nextTick(() => {
          // console.log(stateUser.value);
          // console.log(stateUser.value.classInfoList);
          let arr = stateUser.value.classInfoList.map(v => v.gradeId);
          let list = [];
          // console.log(arr);
          res.data.data.forEach(v => {
            if (arr.indexOf(v.gradeId) !== -1) list.push(v);
          });
          res.data.data = list;
          // console.log(list);
          // });
        }
        optionList.value.gradeList = res.data.data;
        if (optionList.value.gradeList.length > 0) {
          optionList.value.gradeList.forEach(item => {
            item.name = item.gradeName;
            item.id = item.gradeId;
          });
        }

        if (stateUser.value.identity !== 8) {
          where.value.gradeId = optionList.value.gradeList.length
            ? optionList.value.gradeList[0].gradeId
            : null;
          // onChangeGrade(where.value.gradeId);
          where.value.classId = null;
          optionList.value.classList = [];
          await classList({ gradeId: where.value.gradeId }).then(res => {
            if (res.data.code === 200) {
              // if (stateUser.value.identity !== 8) {
              let arr = stateUser.value.classInfoList.filter(
                v => v.gradeId === where.value.gradeId
              )[0].classIdList;
              // console.log(arr);
              let list = [];
              res.data.data.forEach(v => {
                if (arr.indexOf(v.id) !== -1) list.push(v);
              });
              res.data.data = list;
              // }
              optionList.value.classList = res.data.data;
              if (
                localStorageSchoolId === '346001568933441537' ||
                localStorageSchoolId === '221954838718582784'
              ) {
                where.value.classId = null;
              } else {
                where.value.classId = optionList.value.classList.length
                  ? optionList.value.classList[0].id
                  : null;
              }
            }
          });
        }
        // console.log('获取的年级列表', optionList.value.gradeList);

        optionList.value.gradeList.forEach(item => {
          item.isLeaf = false;
        });
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            isLeaf: false,
            name: elem.gradeName,
            id: elem.gradeId,
            gradeName: elem.gradeName
          };
          targetOption.children.push(obj);
        });
        filterChangeRef.value.sectionList = [...filterChangeRef.value.sectionList];
        getStudent();
      }
    });
  }

  if (targetOption.gradeName) {
    classList({ gradeId: targetOption.id }).then(res => {
      if (res.data.code === 200) {
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            name: elem.className,
            id: elem.id
          };
          targetOption.children.push(obj);
        });
        filterChangeRef.value.sectionList = [...filterChangeRef.value.sectionList];
        // console.log('最后的', optionList.value.sectionList);
      }
    });
  }
};
// 获取宿舍楼层列表
const getFloorList = value => {
  floorList(value).then(res => {
    if (res.data.code === 200) {
      res.data.data.forEach(elem => {
        let obj = {
          name: `${elem.storey}楼`,
          storey: elem.storey,
          id: elem.storey,
          dormitoryId: elem.id,
          floor: elem.floor,
          isLeaf: false
        };
        optionList.value.roomList.push(obj);
        // console.log('targetOption', optionList.value.roomList);
      });
    }
  });
};
// 获取下拉选项列表
const getOptionList = async () => {
  await getDormitoryList();
  // await getGradeList();
  await getStudent();
};
function changeAddlow(value) {
  // console.log('选宿舍楼之后', value);
  formDataCreate.value.dormitoryRoomId = null;
  formDataCreate.value.dormitoryRoomName = null;
}
// 选择年级改变回调
const onChangeGrade = async value => {
  where.value.classId = null;
  optionList.value.classList = [];
  await classList({ gradeId: value }).then(res => {
    if (res.data.code === 200) {
      if (stateUser.value.identity !== 8) {
        let arr = stateUser.value.classInfoList.filter(v => v.gradeId === where.value.gradeId)[0]
          .classIdList;
        // console.log(arr);
        let list = [];
        res.data.data.forEach(v => {
          if (arr.indexOf(v.id) !== -1) list.push(v);
        });
        res.data.data = list;
      }
      optionList.value.classList = res.data.data;

      where.value.classId = optionList.value.classList.length
        ? optionList.value.classList[0].id
        : null;
      // }
    }
  });
};
// 选择宿舍楼改变回调
const onChangeDormitory = value => {
  where.value.dormitoryRoomId = [];
  optionList.value.roomList = [];
  if (value !== undefined) {
    getFloorList(value);
  } else {
    getDormitoryList();
  }
};

// 选择学段回调
const onChangeClassNew = (value, selectedOptions) => {
  // console.log(value, 'vcc--class');
  if (value.length === 3) {
    where.value.gradeId = value[1];
    where.value.classId = value[2];
    // console.log('where.value.classId是什么', where.value.classId);
  }
  if (value.length === 0) {
    where.value.gradeId = null;
    where.value.classId = null;
  }
};
// 选择房间回调
const onChangeRoom = (value, selectedOptions) => {
  // console.log(value, 'vcc');
  if (value.length === 3) {
    where.value.dormitoryId = value[0];
  }
  // console.log('where.dormitoryRoomId', where.value.dormitoryRoomId);
};
// 选择房间异步动态加载
const onLoadDataRoom = selectedOptions => {
  // console.log('pppppppppppppppppp0-', selectedOptions);
  if (!where.value.dormitoryId) {
    where.value.dormitoryId = selectedOptions[0].id;
  }
  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true; // load options lazily
  if (targetOption.dormitoryName) {
    floorList(targetOption.id).then(res => {
      if (res.data.code === 200) {
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            name: `${elem.storey}楼`,
            id: elem.storey,
            storey: elem.storey,
            floor: elem.floor,
            isLeaf: false
          };
          targetOption.children.push(obj);
        });
        optionList.value.roomList = [...optionList.value.roomList];
      }
    });
  }
  if (targetOption.floor) {
    // console.log(selectedOptions);
    let id = selectedOptions[0].floor ? where.value.dormitoryId : selectedOptions[0].id;
    floorRoom(id, targetOption.storey).then(res => {
      if (res.data.code === 200) {
        targetOption.loading = false;
        targetOption.children = [];
        res.data.data.forEach(elem => {
          let obj = {
            name: elem.name,
            id: elem.id,
            isLeaf: true
          };
          targetOption.children.push(obj);
        });
        optionList.value.roomList = [...optionList.value.roomList];
      }
    });
  }
  // console.log('------======', optionList.value.roomList);
};
// 床位改变事件
function selectBed(item) {
  formDataCreate.value.bedNumber = item.bedNumber;
  formDataCreate.value.bedId = item.id;
}
// 宿舍楼事件
function dormitorySelect(item) {
  formDataCreate.value.dormitoryId = item.dormitoryId;
  formDataCreate.value.dormitoryName = item.dormitoryName;
  formDataCreate.value.dormitoryRoomId = null;
  formDataCreate.value.bedNumber = null;
  formDataCreateOption.value.dormitoryRoomList = [];
  formDataCreateOption.value.bedNumberList = [];
  // return false;
  // }
  getRoomList(formDataCreate.value.dormitoryId);
}
// 房间事件
function dormitoryRoom(item) {
  formDataCreate.value.dormitoryRoomId = item.id;
  formDataCreate.value.dormitoryRoomName = item.name;
  formDataCreate.value.bedNumber = null;
  formDataCreateOption.value.bedNumberList = [];
  // return false;
  // }
  getBedList(formDataCreate.value.dormitoryRoomId);
}
/** ***** 表格列表项 *******/
const searchStatus = ref(0);
// table 列表项
const columns = reactive([
  {
    key: 'name',
    title: '姓名',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    fixed: 'left'
  },
  {
    key: 'className',
    title: '学段/年级/班级',
    dataIndex: 'className',
    scopedSlots: { customRender: 'className' }
  },
  {
    key: 'dormitoryName',
    title: '宿舍楼',
    dataIndex: 'dormitoryName',
    scopedSlots: { customRender: 'dormitoryName' }
  },
  {
    key: 'dormitoryRoomName',
    title: '房间名称',
    dataIndex: 'dormitoryRoomName',
    scopedSlots: { customRender: 'dormitoryRoomName' }
  },
  {
    key: 'bedNumber',
    title: '床位',
    dataIndex: 'bedNumber',
    scopedSlots: { customRender: 'bedNumber' }
  },
  {
    key: 'studentStatus',
    title: '学生状态',
    dataIndex: 'studentStatus',
    scopedSlots: { customRender: 'studentStatus' }
  },
  // {
  //   key: 'allocationStatus',
  //   title: '分配状态',
  //   dataIndex: 'allocationStatus',
  //   scopedSlots: { customRender: 'allocationStatus' }
  // },
  {
    key: 'action',
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    width: 100
  }
]);
// 表格数据
let tableData = ref({
  current: 1, // 当前页
  optimizeCountSql: true, // 是否有上一页
  orders: [], // 排序
  pages: 0, // 总页数
  records: [], // 数据
  searchCount: true, // 是否有下一页
  size: 10, // 当前条数
  total: 0 // 总条数
});
// 表格多选选项
const selectedRowKeys = ref([]);
const selectedRows = ref([]);
// 表格多选回调
const onSelectChange = (rowKeys, rows) => {
  selectedRowKeys.value = rowKeys;
  selectedRows.value = rows;
};
// 退宿按钮高亮
let tuisu = ref(true);
watch(selectedRowKeys, value => {
  if (value.length > 0) {
    isStudentCheckOut.value = true;
    const arr = ref([]);
    let isDorm = false;
    selectedRows.value.forEach(i => {
      if (i.dormitoryRoomName) {
        isDorm = true;
      } else {
        isDorm = false;
      }
      arr.value.push({ studentStatus: i.studentStatus });
    });
    // 勾选包含住宿--退宿高亮 0=住宿
    // 没有住宿---所有都不高亮 studentStatus=1 走读
    // 未勾选数据--其他三个高亮 已完成
    // 是否包含住宿的
    let index = arr.value.findIndex(item => item.studentStatus === 0);
    // 不包含住宿的
    if (isDorm) {
      tuisu.value = false;
    } else {
      tuisu.value = true;
    }
  } else {
    isStudentCheckOut.value = false;
    tuisu.value = true;
  }
});
// 列表筛选
const onFinish = () => {
  // console.log('onFinish-----');
  searchStatus.value = 1;
  loading.value = true;
  getStudent(1);
};
// 指定每页条数
const pageSizeOptions = ref(['10', '20', '30', '40', '50', '100', '500', '1000']);
// 分页回调
const onChangePagination = checked => {
  // console.log(`a-switch to ${checked}`);
  loading.value = true;
  getStudent();
};
// 重置筛选
const resetFormData = async () => {
  searchStatus.value = 0;
  let s = optionList.value.gradeList.length ? optionList.value.gradeList[0].gradeId : null;
  selectedRowKeys.value = [];
  selectedRows.value = [];
  // console.log(s, 'kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk');

  // if (stateUser.value.identity !== 8 && schoolBaseId.value !== 1) {
  //   await classList({ gradeId: optionList.value.gradeList[0].gradeId }).then(res => {
  //     if (res.data.code === 200) {
  //       // console.log(stateUser.value.classInfoList, '?????????');
  //       let arr = stateUser.value.classInfoList.filter(v => v.gradeId === where.value.gradeId)[0]
  //         .classIdList;
  //       // console.log(arr, '没报错');
  //       let list = [];
  //       res.data.data.forEach(v => {
  //         if (arr.indexOf(v.id) !== -1) list.push(v);
  //       });
  //       res.data.data = list;
  //       optionList.value.classList = res.data.data;
  //     }
  //   });
  // }

  where.value = {
    name: null, // 姓名
    // gradeId:
    //   stateUser.value.identity !== 8 && schoolBaseId.value !== 1
    //     ? optionList.value.gradeList.length
    //       ? optionList.value.gradeList[0].gradeId
    //       : null
    //     : null, // 年级
    // classId:
    //   stateUser.value.identity !== 8 && schoolBaseId.value !== 1
    //     ? optionList.value.classList.length
    //       ? optionList.value.classList[0].id
    //       : null
    //     : null, // 班级
    dormitoryId: null, // 宿舍楼
    gender: null, // 性别
    dormitoryRoomId: [], // 宿舍楼房间
    studentStatus: null, // 学生状态
    gradeAndClass: [] // 学段 年级班级
    // allocationStatus: null // 分配状态
  };
  filterChangeRef.value.gradeAndClass = [];
  loading.value = true;
  // console.log(where.value, '1111111111');
  getStudent(1);
  getDormitoryList('reset');
};

/** ***** 文件上传 *******/
// 文件列表
const fileList = ref([]);
// 批量导入住宿信息 弹窗
const accommodationExport = reactive({
  title: '批量导入住宿信息',
  visible: false,
  width: '286px',
  iconType: 'default',
  state: 'room'
});
// 取消上传
const onCancelUploadFile = () => {
  fileList.value = [];
  accommodationExport.visible = false;
  btnLoading.value = false;
};
// 文件上传之前回调
const beforeUpload = file => {
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('上传文件不能大于2MB!');
  }
  return isLt2M;
};
// 自定义上传成功回调
const httpRequest = value => {
  fileList.value = [value.file];
};
// 文件上传状态改变回调
const onChangeUpload = (file, fileList, event) => {
  // console.log(file, fileList, event);
};
// 确认上传
const onUploadFile = () => {
  if (!fileList.value.length) {
    message.error('请上传文件');
    return;
  }
  let form = new FormData();
  form.append('file', fileList.value[0]);
  btnLoading.value = true;
  importAccommodation(form)
    .then(res => {
      if (res.data.code === 200) {
        if (!res.data.data.errorData) {
          tipImport.visible = true;
          btnLoading.value = false;
          getStudent(1);
        } else {
          errorExportList.value = res.data.data;
          message.error('导入失败');
          btnLoading.value = false;
          errorExportInfo.visible = true;
        }
      } else {
        btnLoading.value = false;
        message.error(res.data.msg);
      }
    })
    .catch(() => {
      btnLoading.value = false;
      message.error('导入失败');
    })
    .finally(() => {
      btnLoading.value = false;
      onCancelUploadFile();
    });
};
// 模板下载
const onDownloadTemplate = () => {
  // window.open(
  //   `${process.env.VUE_APP_REQUEST_BASE_URL}/schStudentDormitoryRelation/template?excelType=1`
  // );

  template(1).then(res => {
    let blob = new Blob([res.data], {
      type: 'application/vnd.ms-excel' // 将会被放入到blob中的数组内容的MIME类型
    });
    // let objectUrl = URL.createObjectURL(blob); // 生成一个url
    // window.location.href = objectUrl; // 浏览器打开这个url
    let objectUrl = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = objectUrl;
    link.setAttribute('download', '住宿信息模板');
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(link.href);
  });
};

/** ***** 批量导入住宿信息 *******/
// 批量导入住宿成功提示
const tipImport = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default'
});
// 批量导入失败数据
const errorExportList = ref([]);
// 批量导入失败返回网页 弹窗
const errorExportInfo = reactive({
  title: '导入失败详情',
  visible: false,
  width: '1000px',
  iconType: 'default'
});
// 批量导入失败返表格列表项
const columnsTableImport = reactive([
  {
    key: 'sectionCode',
    title: '学段',
    dataIndex: 'sectionCode',
    scopedSlots: { customRender: 'sectionCode' },
    width: 140
  },
  {
    key: 'gradeName',
    title: '年级',
    dataIndex: 'gradeName',
    scopedSlots: { customRender: 'gradeName' },
    width: 100
  },
  {
    key: 'className',
    title: '班级',
    dataIndex: 'className',
    scopedSlots: { customRender: 'className' },
    width: 80
  },
  {
    key: 'name',
    title: '姓名',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    width: 100
  },
  {
    key: 'studentIdCard',
    title: '身份证',
    dataIndex: 'studentIdCard',
    scopedSlots: { customRender: 'studentIdCard' },
    width: 100
  },
  {
    key: 'dormitoryName',
    title: '宿舍楼',
    dataIndex: 'dormitoryName',
    scopedSlots: { customRender: 'dormitoryName' },
    width: 100
  },
  {
    key: 'dormitoryRoomName',
    title: '房间名称',
    dataIndex: 'dormitoryRoomName',
    scopedSlots: { customRender: 'dormitoryRoomName' },
    width: 100
  },
  {
    key: 'bedNumber',
    title: '床位号',
    dataIndex: 'bedNumber',
    scopedSlots: { customRender: 'bedNumber' },
    width: 110
  },
  {
    key: 'reason',
    title: '原因',
    dataIndex: 'reason',
    scopedSlots: { customRender: 'reason' },
    width: 100
  }
]);

/** ***** 新增住宿 *******/
// 新增住宿选择学生事件
function onFramework() {
  batchMarking.visible = true;
  batchMarking.title = '选择学生';
  batchMarking.judge = '1';
  batchMarking.btnState = '确定';
  getList();
  // getStudentsList();
  openStudentValue.value = [];
  selectStudentValue.value = '';
  getGradeLists(filterChangeRef.value.sectionList[0], 0);
}
// 新增住宿组装数据
const formDataCreate = ref({
  name: null, // 姓名
  classId: null, // 班级ID
  className: '', // 班级名称
  dormitoryId: null, // 宿舍楼
  dormitoryRoomId: null, // 宿舍房间ID
  dormitoryRoomName: null, // 宿舍房间名称
  bedNumber: null, // 床位
  gradeId: '', // 学生年级ID
  gradeName: '', // 学生年级名称
  gender: '', // 学生性别
  studentIdCard: '', // 学生身份证号
  studentUserId: null, // 学生用户id
  studentAvatar: '', // 学生头像
  studentStatus: 0, // 学生状态 新增前端默认传0 代表住宿
  dormitoryName: '', // 宿舍楼名称
  // allocationStatus: 1, // 分配状态;0未分配，1已分配，2其他 (新增默认传1)
  bedId: null // 床位ID
});
// 新增住宿信息弹窗
const add = reactive({
  title: '新增住宿',
  visible: false,
  width: '367px',
  iconType: 'default'
});
// 添加住宿弹窗按钮
const onAccommodationTap = () => {
  getExistDormitoryList();
  add.visible = true;
};
// 取消新增
const onAccommodationCancel = () => {
  onAccommodationReset();
  btnLoading.value = false;
  add.visible = false;
};
// 重置新增信息
const onAccommodationReset = () => {
  formDataCreate.value = {
    name: null, // 姓名
    classId: null,
    dormitoryId: null, // 宿舍楼
    dormitoryRoomId: null, // 房间名称
    bedNumber: null // 床位
  };
  formDataCreateOption.value = {
    dormitoryList: [],
    dormitoryRoomList: [],
    bedNumberList: []
  };
};
// 添加住宿下拉
const formDataCreateOption = ref({
  dormitoryList: [],
  dormitoryRoomList: [],
  bedNumberList: []
});
// 获取添加住宿宿舍楼
const getExistDormitoryList = () => {
  formDataCreateOption.value.dormitoryList = [];
  existDormitoryList(0).then(res => {
    if (res.data.code === 200) {
      formDataCreateOption.value.dormitoryList = res.data.data;
      // console.log('获取添加住宿宿舍楼', res.data.data);
    }
  });
};
// 获取添加住宿房间
const getRoomList = id => {
  formDataCreateOption.value.dormitoryRoomList = [];
  roomList({ dormitoryId: id }).then(res => {
    if (res.data.code === 200) {
      formDataCreateOption.value.dormitoryRoomList = res.data.data;
    }
  });
};
// 获取添加住宿床位
const getBedList = id => {
  bedList(id).then(res => {
    if (res.data.code === 200) {
      formDataCreateOption.value.bedNumberList = res.data.data;
    }
  });
};
// 住宿班级选择回调
const onChangeClass = () => {
  if (!formDataCreate.value.classId) {
    formDataCreate.value.dormitoryId = null;
    formDataCreate.value.dormitoryRoomId = null;
    formDataCreate.value.bedNumber = null;
    formDataCreateOption.value.dormitoryRoomList = [];
    formDataCreateOption.value.bedNumberList = [];
    return false;
  }
  defaultReveal(
    formDataCreate.value.classId,
    Number(formDataCreate.value.gender),
    formDataCreate.value.gradeId
  ).then(res => {
    if (res.data.code === 200) {
      if (res.data.data) {
        formDataCreate.value.dormitoryId = res.data.data.dormitoryId;
        formDataCreate.value.dormitoryName = res.data.data.dormitoryName;
        formDataCreate.value.dormitoryRoomId = res.data.data.dormitoryRoomId;
        formDataCreate.value.dormitoryRoomName = res.data.data.dormitoryRoomName;
        formDataCreate.value.bedNumber = res.data.data.bedNumber;
        formDataCreate.value.bedId = res.data.data.bedId;
        // formDataCreate.value.gender= '男'
        getRoomList(formDataCreate.value.dormitoryId);
        getBedList(formDataCreate.value.dormitoryRoomId);
        batchMarking.visible = false;
      } else {
        batchMarking.visible = false;
      }
    }
  });
};
// 新增-宿舍改变监听
// const onWatchDormitoryId = computed(() => formDataCreate.value.dormitoryId);
// watch(onWatchDormitoryId, () => {
//   console.log(formDataCreate.value.dormitoryId);
//   // if (!formDataCreate.value.dormitoryId) {
//   formDataCreate.value.dormitoryRoomId = null;
//   formDataCreate.value.bedNumber = null;
//   formDataCreateOption.value.dormitoryRoomList = [];
//   formDataCreateOption.value.bedNumberList = [];
//   // return false;
//   // }
//   getRoomList(formDataCreate.value.dormitoryId);
// });
// 新增-房间改变监听
// const onWatchRoomId = computed(() => formDataCreate.value.dormitoryRoomId);
// watch(onWatchRoomId, () => {
//   // if (!formDataCreate.value.dormitoryRoomId) {
//   formDataCreate.value.bedNumber = null;
//   formDataCreateOption.value.bedNumberList = [];
//   // return false;
//   // }
//   getBedList(formDataCreate.value.dormitoryRoomId);
// });

// 确认新增
const onAccommodationCreate = debounce(function () {
  if (!formDataCreate.value.name) {
    message.error('请选择学生姓名');
    return false;
  }
  if (!formDataCreate.value.dormitoryId) {
    message.error('请选择宿舍楼');
    return false;
  }
  if (!formDataCreate.value.dormitoryRoomName) {
    message.error('请选择房间名称');
    return false;
  }
  if (!formDataCreate.value.bedNumber) {
    message.error('请选择床位');
    return false;
  }
  let obj = {
    name: formDataCreate.value.name, // 学生姓名
    gradeId: formDataCreate.value.gradeId, // 学生年级ID
    gradeName: formDataCreate.value.gradeName, // 学生年级名称
    classId: formDataCreate.value.classId, // 班级ID
    className: formDataCreate.value.className, // 班级名称
    gender: formDataCreate.value.gender * 1 === 1 ? '男' : '女', // 学生性别
    // studentIdCard: '', // 学生身份证号
    studentUserId: formDataCreate.value.studentUserId, // 学生用户id
    studentAvatar: formDataCreate.value.studentAvatar, // 学生头像
    studentStatus: 0, // 学生状态 新增前端默认传0 代表住宿
    dormitoryId: formDataCreate.value.dormitoryId, // 宿舍楼ID
    dormitoryName: formDataCreate.value.dormitoryName, // 宿舍楼名称
    dormitoryRoomName: formDataCreate.value.dormitoryRoomName, // 宿舍房间名称
    // allocationStatus: 1, // 分配状态;0未分配，1已分配，2其他 (新增默认传1)
    dormitoryRoomId: formDataCreate.value.dormitoryRoomId, // 宿舍房间ID
    bedId: formDataCreate.value.bedId, // 床位ID
    bedNumber: formDataCreate.value.bedNumber // 床位号
  };
  btnLoading.value = true;

  saveStay(obj)
    .then(res => {
      if (res.data.code === 200) {
        message.success('新增成功');
        btnLoading.value = false;
        onAccommodationCancel();
        getStudent(1);
      } else {
        btnLoading.value = false;
        message.error(res.data.msg);
      }
    })
    .catch(err => {
      message.error(err.data.msg || '新增失败');
      btnLoading.value = false;
    });
}, 500);

/** ***** 查看详情 *******/
// 个人信息数据
const personalInfo = ref([]);
// 查看 个人信息 弹窗
const personalInfoTap = reactive({
  title: '个人信息',
  visible: false,
  width: '640px',
  iconType: 'default'
});
// 查看
const onStundentDeta = value => {
  personalInfo.value = [];
  studentDetail(value.studentUserId).then(res => {
    // console.log(res, '个人信息');
    personalInfo.value = res.data.data;
    personalInfo.value.allName = `${personalInfo.value.sectionName || '--'}/${
      personalInfo.value.gradeName || '--'
    }/${personalInfo.value.className || '--'}`;
    // console.log(personalInfo.value, '56');
  });
  personalInfoTap.visible = true;
};

/** ***** 床位/宿舍互换 *******/
// 调换宿舍信息组装数据
const formDataExchangeDormitory = ref([
  {
    swapSource: {
      dormitoryId: '',
      dormitoryName: '',
      roomId: '',
      roomName: ''
    },
    swapTarget: {
      dormitoryId: '',
      dormitoryName: '',
      roomId: '',
      roomName: ''
    }
  }
]);
// 调换信息组装数据
const formDataExchange = ref([
  {
    swapSource: {
      studentUserId: '',
      bedId: '',
      bedNumber: '',
      roomId: ''
    },
    swapTarget: {
      studentUserId: '',
      bedId: '',
      bedNumber: '',
      roomId: ''
    }
  }
]);
// 床位/宿舍调换弹窗按钮
const onExchange = value => {
  bedChange.visible = true;
  bedChange.type = value;
  if (value === 'bed') {
    bedChange.title = '床位调换';
  } else if (value === 'dormitory') {
    bedChange.title = '宿舍互换';
  }
};
// 床位调换/宿舍互换 弹窗
const bedChange = reactive({
  title: '',
  visible: false,
  width: '435px',
  iconType: 'default',
  type: ''
});
// 新增一组调换信息数据
const formDataExchangeCreate = () => {
  if (bedChange.type === 'bed') {
    let obj = {
      swapSource: {
        studentUserId: '',
        bedId: '',
        bedNumber: '',
        roomId: ''
      },
      swapTarget: {
        studentUserId: '',
        bedId: '',
        bedNumber: '',
        roomId: ''
      }
    };
    formDataExchange.value.push(obj);
    // console.log(formDataExchange.value, 'formDataExchange.value999');
  } else {
    let obj = {
      swapSource: {
        dormitoryId: '',
        dormitoryName: '',
        roomId: '',
        roomName: ''
      },
      swapTarget: {
        dormitoryId: '',
        dormitoryName: '',
        roomId: '',
        roomName: ''
      }
    };
    formDataExchangeDormitory.value.push(obj);
  }
};
// 删除学生
const confirm = e => {
  if (bedChange.type === 'bed') {
    formDataExchange.value.splice(e, 1);
  } else {
    formDataExchangeDormitory.value.splice(e, 1);
  }
};
// 床位调换-位置选择-班级列表
const classListOption = ref([]);
// 床位调换-位置选择-宿舍列表
const dormitoryListOption = ref([]);
// 判断当前选择学生的位置
const studentIndex = ref({
  type: null,
  index: null
});

// 床位/宿舍调换选择学生弹窗
const bedchoiceForm = reactive({
  title: '',
  visible: false,
  width: '',
  iconType: 'default',
  type: null // 1 班级 2 宿舍
});
// 选择学生
const onSelectStudent = async (type, index) => {
  resetForm();
  if (optionList.value.dormitoryList.length > 0) {
    optionList.value.dormitoryList.forEach(elem => {
      let storeyList = [];
      for (let i = 0; i < elem.totalStorey; i++) {
        let obj = {
          id: i + 1,
          roomList: []
        };
        storeyList.push(obj);
      }
      elem.storeyList = storeyList;
    });
    onClickRoomOption(
      optionList.value.dormitoryList[0].id,
      optionList.value.dormitoryList[0].storeyList[0].id,
      0,
      0
    );
    dormitoryListOption.value = optionList.value.dormitoryList;
  }

  if (bedChange.type === 'bed') {
    locationPick().then(res => {
      if (res.data.code === 200) {
        classListOption.value = res.data.data;
        if (classListOption.value.length) {
          if (classListOption.value[0].gradleList.length) {
            if (classListOption.value[0].gradleList[0].classList.length) {
              selectClassDefault(classListOption.value[0].gradleList[0].classList[0].classId);
            }
            openStudentValue.value = [0, classListOption.value[0].gradleList[0].gradeId];
          } else {
            openStudentValue.value = [0];
          }
        } else {
          openStudentValue.value = [];
        }
      }
    });
    bedchoiceForm.title = '位置选择';
    bedchoiceForm.width = '760px';
  } else if (bedChange.type === 'dormitory') {
    bedchoiceForm.title = '宿舍选择';
    bedchoiceForm.width = '359px';
  }
  bedchoiceForm.visible = true;
  studentIndex.value.type = type;
  studentIndex.value.index = index;
};
// 班级默认选择
const selectClassDefault = id => {
  selectStudentValue.value = ['0-0-0'];
  memberList({ classId: id }).then(res => {
    if (res.data.code === 200) {
      formDataStudentList.value = res.data.data;
    }
  });
};
// 班级默认选择
const selectDormitoryDefault = data => {
  if (data.length > 0) {
    if (data[0].storeyList.length > 0) {
      openRoomValue.value = [data[0].id, `${data[0].id}-${data[0].storeyList[0].id}`];
    }
    if (data[0].storeyList[0].roomList.length > 0) {
      selectRoomValue.value = [data[0].storeyList[0].roomList[0].id];
      getRoomAllBedInfo({ id: data[0].storeyList[0].roomList[0].id }).then(res => {
        if (res.data.code === 200) {
          formDataRoomDetails.value = res.data.data;
        }
      });
    }
  }
};
const dormitoryInfo = ref([]);
// 选择学生单选按钮
const onChangeRadioStudent = value => {
  dormitoryListOption.value.forEach(item => {
    if (item.id === onRadioRoom.value.dormitoryId) {
      if (item.storeyList) {
        item.storeyList.forEach(it => {
          if (it.roomList) {
            it.roomList.forEach(i => {
              if (i.id === onRadioRoom.value.roomId) {
                dormitoryInfo.value = {
                  dormitoryName: i.dormitoryName,
                  roomName: i.name,
                  genderAttribute: i.genderAttribute
                };
              }
            });
          }
        });
      }
    }
  });
};
// 班级学生信息数据
const formDataStudentList = ref([]);
// 宿舍详情信息数据
const formDataRoomDetails = ref([]);
// 学生信息单选
const onRadioStudent = ref(null);
// 宿舍房间学生信息单选
const onRadioRoom = ref(null);
// 宿舍信息
const onDormitoryFormData = ref({});
// 年级选择菜单回调
const onClickClass = ({ item, key, keyPath }) => {
  onRadioStudent.value = null;
  onRadioRoom.value = null;
  // console.log(item, key, keyPath, 'item, key, keyPath', selectStudentValue.value);
  memberList({ classId: item.value }).then(res => {
    if (res.data.code === 200) {
      formDataStudentList.value = res.data.data;
    }
  });
};
// 宿舍选择回调
const onClickDormitoryRoom = ({ item, key, keyPath }) => {
  onDormitoryFormData.value = item.value;
};
// 选择房间查看详情
const onRoomDetails = value => {
  onRadioStudent.value = null;
  onRadioRoom.value = null;
  getRoomAllBedInfo({ id: value.key }).then(res => {
    if (res.data.code === 200) {
      formDataRoomDetails.value = res.data.data;
    }
  });
};
// 验证是否有已添加过的学生
const isFormDataStudentList = data => {
  try {
    formDataExchange.value.forEach((elem, index) => {
      if (
        elem.swapSource.studentUserId === data.studentUserId ||
        elem.swapTarget.studentUserId === data.studentUserId
      ) {
        message.error(`第${index + 1}组数据已存在该学生，请重新选择`);
        throw new Error();
      }
    });
  } catch (error) {
    return false;
  }
  return true;
};
// 验证是否有已添加过的床
const isFormDataBedList = data => {
  // console.log('验证的数据是什么', data);
  try {
    formDataExchange.value.forEach((elem, index) => {
      if (elem.swapTarget.id === data.id) {
        message.error(`第${index + 1}组数据已存在该床位，请重新选择`);
        throw new Error();
      }
    });
  } catch (error) {
    return false;
  }
  return true;
};
// 确认选择学生
const onSubmit = () => {
  // console.log('=-=-0', bedChange.type);
  // console.log('数组', formDataExchange.value);
  // console.log(
  //   selectDormitoryRoomValue.value,
  //   'selectDormitoryRoomValue',
  //   onRadioStudent.value,
  //   formDataStudentList.value
  // );
  if (bedChange.type === 'bed') {
    // --------------------------

    // --------------------------
    if (
      tabsValue.value === 1 &&
      (onRadioStudent.value === '' ||
        onRadioStudent.value === null ||
        onRadioStudent.value === undefined)
    ) {
      message.error('请选择学生');
      return false;
    }
    if (
      tabsValue.value === 2 &&
      (onRadioRoom.value === '' || onRadioRoom.value === null || onRadioStudent.value === undefined)
    ) {
      message.error('请选择学生');
      return false;
    }
    if (tabsValue.value === 1) {
      try {
        formDataStudentList.value.forEach(elem => {
          if (elem.people.length) {
            elem.people.forEach(item => {
              if (item.studentUserId === onRadioStudent.value) {
                if (
                  studentIndex.value.type === 'swapSource' &&
                  item.studentUserId ===
                    formDataExchange.value[studentIndex.value.index].swapTarget.studentUserId
                ) {
                  message.error('不能添加相同学生，请重新选择');
                  throw new Error();
                }
                if (
                  studentIndex.value.type === 'swapTarget' &&
                  item.studentUserId ===
                    formDataExchange.value[studentIndex.value.index].swapSource.studentUserId
                ) {
                  message.error('不能添加相同学生，请重新选择');
                  throw new Error();
                }
                if (!isFormDataStudentList(item)) throw new Error();

                formDataExchange.value[studentIndex.value.index][studentIndex.value.type] = item;
              }
            });
          }
        });
      } catch (error) {
        return false;
      }
    } else if (tabsValue.value === 2) {
      // 新加的
      if (!isFormDataBedList(onRadioRoom.value)) {
        return false;
      }
      if (studentIndex.value.type === 'swapSource') {
        if (formDataExchange.value[studentIndex.value.index].swapTarget.roomId) {
          if (
            formDataExchange.value[studentIndex.value.index].swapTarget.studentUserId &&
            onRadioRoom.value.id === formDataExchange.value[studentIndex.value.index].swapTarget.id
          ) {
            // console.log('--0');
            message.error('不能添加相同宿舍床位，请重新选择');
            return false;
          }
          if (
            !onRadioRoom.value.studentUserId &&
            !formDataExchange.value[studentIndex.value.index].swapTarget.studentUserId
          ) {
            message.error('不能添加两个空床位进行互换，请重新选择');
            return false;
          }
        } else {
          if (
            formDataExchange.value[studentIndex.value.index].swapTarget.studentUserId &&
            onRadioRoom.value.studentUserId ===
              formDataExchange.value[studentIndex.value.index].swapTarget.studentUserId
          ) {
            message.error('添加的学生信息相同，请重新选择');
            return false;
          }
        }
        try {
          formDataExchange.value.forEach((elem, index) => {
            if (!onRadioRoom.value.studentUserId) {
              if (
                onRadioRoom.value.id === elem.swapSource.id ||
                onRadioRoom.value.id === elem.swapTarget.id
              ) {
                message.error(`第${index + 1}组数据已存在该宿舍房间床位，请重新选择`);
                throw new Error();
              }
            } else {
              if (
                onRadioRoom.value.studentUserId === elem.swapSource.studentUserId ||
                onRadioRoom.value.studentUserId === elem.swapTarget.studentUserId
              ) {
                message.error(`第${index + 1}组数据已存在该宿舍房间学生，请重新选择`);
                throw new Error();
              }
            }
          });
        } catch (error) {
          return false;
        }
      }
      if (studentIndex.value.type === 'swapTarget') {
        // console.log(formDataExchange.value, 'formDataExchange.value');
        if (formDataExchange.value[studentIndex.value.index].swapSource.roomId) {
          if (
            formDataExchange.value[studentIndex.value.index].swapSource.studentUserId &&
            onRadioRoom.value.id === formDataExchange.value[studentIndex.value.index].swapSource.id
          ) {
            // console.log('--1');
            message.error('不能添加相同宿舍床位，请重新选择');
            return false;
          }
          if (
            !formDataExchange.value[studentIndex.value.index].swapSource.studentUserId &&
            !onRadioRoom.value.studentUserId
          ) {
            message.error('不能添加两个空床位进行互换，请重新选择');
            return false;
          }
        } else {
          if (
            formDataExchange.value[studentIndex.value.index].swapSource.studentUserId &&
            onRadioRoom.value.studentUserId ===
              formDataExchange.value[studentIndex.value.index].swapSource.studentUserId
          ) {
            message.error('添加的学生信息相同，请重新选择');
            return false;
          }
        }
      }
      // console.log(onRadioRoom.value, 'onRadioRoom.value');
      formDataExchange.value[studentIndex.value.index][studentIndex.value.type] = onRadioRoom.value;
    }
  } else {
    // console.log('走选择宿舍了吗', onDormitoryFormData.value);
    if (
      selectDormitoryRoomValue.value[0] === '' ||
      selectDormitoryRoomValue.value[0] === null ||
      selectDormitoryRoomValue.value[0] === undefined
    ) {
      message.error('请选择宿舍');
      return false;
    }
    // if (onDormitoryFormData.value.occupancyNumber === 0) {
    //   message.error('当前宿舍没有入住学生，无法交换');
    //   return false;
    // }
    if (
      studentIndex.value.type === 'swapSource' &&
      formDataExchangeDormitory.value[studentIndex.value.index].swapTarget.id ===
        onDormitoryFormData.value.id
    ) {
      message.error('不能添加相同宿舍，请重新选择');
      return false;
    }
    // console.log(formDataExchangeDormitory.value, 'formDataExchangeDormitory.value');
    if (
      studentIndex.value.type === 'swapTarget' &&
      formDataExchangeDormitory.value[studentIndex.value.index].swapSource.id ===
        onDormitoryFormData.value.id
    ) {
      message.error('不能添加相同宿舍，请重新选择');
      return false;
    }
    try {
      formDataExchangeDormitory.value.forEach((elem, index) => {
        if (
          elem.swapSource.id === onDormitoryFormData.value.id ||
          elem.swapTarget.id === onDormitoryFormData.value.id
        ) {
          message.error(`第${index + 1}组数据已存在该宿舍，请重新选择`);
          throw new Error();
        }
      });
    } catch (error) {
      return false;
    }
    if (
      studentIndex.value.type === 'swapSource' &&
      formDataExchangeDormitory.value[studentIndex.value.index].swapTarget.id
    ) {
      let swapSourceObj = onDormitoryFormData.value;
      let swapTargetObj = formDataExchangeDormitory.value[studentIndex.value.index].swapTarget;
      // console.log(swapSourceObj);
      // console.log(swapTargetObj);
      let swapSourceBedNum = swapSourceObj.bedNum - swapSourceObj.disableNumber;
      let swapSourceOccupancyNum = swapSourceObj.occupancyNumber;
      let swapTargetBedNum = swapTargetObj.bedNum - swapTargetObj.disableNumber;
      let swapTargetOccupancyNum = swapTargetObj.occupancyNumber;
      if (swapSourceOccupancyNum > swapTargetBedNum) {
        message.error('该宿舍入住人数不符，请重新选择');
        return false;
      }
      if (swapSourceOccupancyNum <= swapTargetBedNum && swapTargetOccupancyNum > swapSourceBedNum) {
        message.error('该宿舍入住人数不符，请重新选择');
        return false;
      }
    }
    if (
      studentIndex.value.type === 'swapTarget' &&
      formDataExchangeDormitory.value[studentIndex.value.index].swapSource.id
    ) {
      let swapTargetObj = onDormitoryFormData.value;
      let swapSourceObj = formDataExchangeDormitory.value[studentIndex.value.index].swapSource;
      // console.log(swapSourceObj);
      // console.log(swapTargetObj);
      let swapSourceBedNum = swapSourceObj.bedNum - swapSourceObj.disableNumber;
      let swapSourceOccupancyNum = swapSourceObj.occupancyNumber;
      let swapTargetBedNum = swapTargetObj.bedNum - swapTargetObj.disableNumber;
      let swapTargetOccupancyNum = swapTargetObj.occupancyNumber;
      if (swapTargetOccupancyNum > swapSourceBedNum) {
        message.error('该宿舍入住人数不符，请重新选择');
        return false;
      }
      if (swapTargetOccupancyNum <= swapSourceBedNum && swapSourceOccupancyNum > swapTargetBedNum) {
        message.error('该宿舍入住人数不符，请重新选择');
        return false;
      }
    }
    formDataExchangeDormitory.value[studentIndex.value.index][studentIndex.value.type] =
      onDormitoryFormData.value;
    // }
  }
  bedchoiceForm.visible = false;
  onCancel();
};
// 取消
const onCancel = () => {
  bedchoiceForm.visible = false;
  onSearchState.value = true;
  formState.value.search = null;

  tabsValue.value = 1;
  resetForm();
};
// 宿舍搜索数据
const formState = ref({
  search: null
});
// 删除选择学生
const onDelStudent = (type, index) => {
  if (bedChange.type === 'bed') {
    formDataExchange.value[index][type] = {};
  } else {
    formDataExchangeDormitory.value[index][type] = {};
  }
};
// 查询组装楼层下房间信息
const onClickRoomOption = async (dormitoryId, storeyId, index, key, isChick) => {
  if (onSearchState.value) {
    if (!isChick) {
      await dormitoryRoomList(dormitoryId, storeyId).then(res => {
        if (res.data.code === 200) {
          dormitoryListOption.value[index].storeyList[key].roomList = res.data.data;
        }
      });
    }
  } else {
    return false;
  }
};
// 确认交换
const onExchangeSubmit = debounce(function () {
  if (bedChange.type === 'bed') {
    let isErr = false;
    formDataExchange.value.forEach((elem, index) => {
      // if (elem.swapTarget.allocationStatus === 0 || elem.swapSource.allocationStatus === 0) {
      //   message.error(`请重新选择第${index + 1}条信息, 当中包含未分配住宿信息的学生`);
      //   throw new Error();
      // }
      if (isErr) return;
      if (!elem.swapSource.bedNumber || !elem.swapTarget.bedNumber) {
        isErr = true;
        message.error(`请选择第${index + 1}条信息需要交换的学生`);
        return;
        // throw new Error();
      }
      if (!elem.swapSource.studentUserId && !elem.swapTarget.studentUserId) {
        isErr = true;
        message.error(`请重新选择第${index + 1}条信息需要交换的学生，空床位不可交换`);
        return;
        // throw new Error();
      }
    });
    if (isErr) return;
    let arr = [];
    console.log(formDataExchange, 'formDataExchange');
    formDataExchange.value.forEach(elem => {
      // console.log(elem.swapSource.genderAttribute, '666');
      // console.log(elem.swapTarget.genderAttribute, '777');
      let obj = {
        swapSource: {
          studentUserId: elem.swapSource.studentUserId,
          bedId: elem.swapSource.id,
          bedNumber: elem.swapSource.bedNumber,
          roomId: elem.swapSource.roomId,
          roomName: elem.swapSource.roomName
            ? elem.swapSource.roomName
            : dormitoryInfo.value.roomName,
          dormitoryId: elem.swapSource.dormitoryId,
          dormitoryName: elem.swapSource.dormitoryName
            ? elem.swapSource.dormitoryName
            : dormitoryInfo.value.dormitoryName,
          bedState: elem.swapSource.bedState,
          genderAttribute: elem.swapSource.genderAttribute
            ? elem.swapSource.genderAttribute
            : dormitoryInfo.value.genderAttribute,
          gradeId: elem.swapSource.gradeId
        },
        swapTarget: {
          studentUserId: elem.swapTarget.studentUserId,
          bedId: elem.swapTarget.id,
          bedNumber: elem.swapTarget.bedNumber,
          roomId: elem.swapTarget.roomId,
          roomName: elem.swapTarget.roomName
            ? elem.swapTarget.roomName
            : dormitoryInfo.value.roomName,
          dormitoryId: elem.swapTarget.dormitoryId,
          dormitoryName: elem.swapTarget.dormitoryName
            ? elem.swapTarget.dormitoryName
            : dormitoryInfo.value.dormitoryName,
          bedState: elem.swapTarget.bedState,
          genderAttribute: elem.swapTarget.genderAttribute
            ? elem.swapTarget.genderAttribute
            : dormitoryInfo.value.genderAttribute,
          gradeId: elem.swapSource.gradeId
        }
      };
      arr.push(obj);
    });
    // bedSwapBOS: arr

    btnLoading.value = true;
    bedExchange({ bedSwapBos: arr }).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg);
        onCancelExchange();
        btnLoading.value = false;
        getStudent(1);
      } else {
        btnLoading.value = false;
        message.error(res.data.msg);
      }
    });
  } else {
    let isErr = false;

    formDataExchangeDormitory.value.forEach((elem, index) => {
      if (isErr) return;
      if (!elem.swapSource.id || !elem.swapTarget.id) {
        message.error(`请选择第${index + 1}条信息需要交换的宿舍`);
        isErr = true;
      }
      if (elem.swapSource.bedNum !== elem.swapTarget.bedNum) {
        message.error(`不同类型房间不可互换，请重新选择`);
        isErr = true;
      }
    });
    if (isErr) return;
    let arr = [];
    formDataExchangeDormitory.value.forEach(elem => {
      let obj = {
        swapSource: {
          dormitoryId: elem.swapSource.dormitoryId,
          dormitoryName: elem.swapSource.dormitoryName,
          roomId: elem.swapSource.id,
          roomName: elem.swapSource.name,
          genderAttribute: elem.swapSource.genderAttribute
        },
        swapTarget: {
          dormitoryId: elem.swapTarget.dormitoryId,
          dormitoryName: elem.swapTarget.dormitoryName,
          roomId: elem.swapTarget.id,
          roomName: elem.swapTarget.name,
          genderAttribute: elem.swapTarget.genderAttribute
        }
      };
      arr.push(obj);
    });
    btnLoading.value = true;
    // console.log(arr);
    dormitoryExchange({ dormitorySwapList: arr }).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg);
        onCancelExchange();
        btnLoading.value = false;
        getStudent(1);
      } else {
        message.error(res.data.msg);
        btnLoading.value = false;
      }
    });
  }
}, 500);
// 关闭交换
const onCancelExchange = () => {
  formDataExchange.value = [
    {
      swapSource: {},
      swapTarget: {}
    }
  ];
  formDataExchangeDormitory.value = [
    {
      swapSource: {},
      swapTarget: {}
    }
  ];
  bedChange.visible = false;
  btnLoading.value = false;
};
// 选择学生菜单
const openStudentValue = ref([]);
watch(openStudentValue, v => {
  // console.log(v, 'selectClassDefault');
});
const selectStudentValue = ref([]);
// 选择宿舍菜单
const openDormitoryRoomValue = ref([]);
const selectDormitoryRoomValue = ref([]);
// 选择房间菜单
const openRoomValue = ref([]);
watch(openRoomValue, v => {
  // console.log(v);
});
const selectRoomValue = ref([]);
// 重置默认
const resetForm = () => {
  openStudentValue.value = [];
  selectStudentValue.value = [];
  openRoomValue.value = [];
  selectRoomValue.value = [];
  onRadioStudent.value = null;
  onRadioRoom.value = null;
  formDataStudentList.value = [];
  formDataRoomDetails.value = [];
  openDormitoryRoomValue.value = [];
  selectDormitoryRoomValue.value = [];
};
// 宿舍楼搜索状态
const onSearchState = ref(true); // false 执行精确了搜索 true 显示全部数据
// 宿舍楼搜索
const onSearch = e => {
  if (e) {
    onSearchState.value = false;
    getDormitoryRoomaNameList({ name: e }).then(res => {
      let data = res.data.data;
      data.forEach(item => {
        let storeyList = [];
        for (let i = 0; i < item.totalStorey; i++) {
          let obj = {
            id: i + 1,
            roomList: item.dormitoryRoomVOList.filter(elem => elem.storey === i + 1)
          };
          obj.roomList.length && storeyList.push(obj);
        }
        item.storeyList = storeyList;
      });
      resetForm();
      // console.log(data);
      dormitoryListOption.value = data;
      // console.log(dormitoryListOption.value);
    });
  } else {
    onSearchState.value = true;
    onSelectStudent(studentIndex.value.type, studentIndex.value.index);
  }
  // console.log(onSearchState.value);
};

/** ***** tabs标签栏 *******/
// tabs标签页
const tabsValue = ref(1);
// 切换班级宿舍
const callback = key => {
  resetForm();
  if (key === 1) {
    bedchoiceForm.title = '位置选择';
    // console.log(classListOption.value, 'classListOption');
    if (classListOption.value.length > 0) {
      if (classListOption.value[0].gradleList.length) {
        if (classListOption.value[0].gradleList[0].classList.length) {
          selectClassDefault(classListOption.value[0].gradleList[0].classList[0].classId);
        }
        openStudentValue.value = [0, classListOption.value[0].gradleList[0].gradeId];
      } else {
        openStudentValue.value = [0];
      }

      selectClassDefault(classListOption.value[0].classList[0].classId);
    } else {
      openStudentValue.value = [];
    }
  } else {
    bedchoiceForm.title = '宿舍选择';
    selectDormitoryDefault(optionList.value.dormitoryList);
  }
};

/** ***** 退宿 *******/
// 退宿弹窗
const checkOut = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default',
  content: '是否确定对所选信息退宿？',
  state: true
});
// 退宿
const studentCheckOutTap = () => {
  checkOut.visible = true;
  checkOut.state = true;
  checkOut.content = '是否确定对所选信息退宿？';
};
// 是否选择退宿学生
const isStudentCheckOut = ref(false);
function checkOutTip() {
  try {
    let num = selectedRows.value.length;
    let index = selectedRows.value.filter(v => v.dormitoryRoomName).length;
    if (index !== num) {
      checkOut.state = false;
      checkOut.content =
        '所选项目包含未分配、走读、未标记住宿等信息，【确认】后将取消选中当前无效信息继续退宿。';
      throw new Error();
    }
  } catch (error) {
    return false;
  }
  return true;
}
// 确认退宿
const onSubmitStudentCheckOut = debounce(function () {
  if (checkOut.state) {
    if (!selectedRowKeys.value.length) {
      message.error('请选择退宿学生');
      return false;
    }
    let arr = [];
    if (!checkOutTip()) {
      selectedRows.value.forEach(elem => {
        if (elem.dormitoryRoomName) {
          arr.push(elem);
        }
      });
      selectedRowKeys.value = [];
      arr.forEach(i => {
        selectedRowKeys.value.push(i.studentUserId);
      });
      return;
    }
    if (!selectedRowKeys.value.length) {
      message.error('无可退宿学生');
      checkOut.visible = false;
      selectedRows.value = [];
      selectedRowKeys.value = [];
      return;
    }
    btnLoading.value = true;
    studentCheckOut(selectedRowKeys.value)
      .then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg);
          selectedRowKeys.value = [];
          selectedRows.value = [];
          checkOut.visible = false;
          tuisu.value = true;
          btnLoading.value = false;
          getStudent(1);
        }
      })
      .catch(err => {
        message.error(err.data.msg || '退宿失败');
        btnLoading.value = false;
      });
  } else {
    btnLoading.value = true;
    studentCheckOut(selectedRowKeys.value)
      .then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg);
          selectedRowKeys.value = [];
          selectedRows.value = [];
          checkOut.visible = false;
          tuisu.value = true;
          btnLoading.value = false;
          // checkOut.visible = false;
          getStudent(1);
        }
      })
      .catch(err => {
        message.error(err.data.msg || '退宿失败');
        btnLoading.value = false;
      });
  }
}, 1000);
function handleCancelCheckOut() {
  selectedRowKeys.value = [];
  selectedRows.value = [];
  tuisu.value = true;
  checkOut.visible = false;
  btnLoading.value = false;
}
/** ***** 新增住宿信息选择学生/批量标记住宿学生 *******/
// 批量选择学生信息列表
const formDataBatchStudentList = ref([]);
// 批量选择学生信息多选
// const checkAll = ref(false);
const onCheckboxStudent = ref([]);
// 全选框点击事件
const onCheckAllChange = (data, e) => {
  if (e.target.checked) {
    data.people.forEach(item => {
      onCheckboxStudent.value.push(item.studentUserId);
      checkboxChangeArr.value.push(item.studentUserId);
      selectStudentNew.value.push(item.studentUserId);
      batchMarkData.value.dormitoryRelationBO.push(item);
    });
  } else {
    let arrBO = [];
    let pArr = [];
    data.people.forEach(item => {
      pArr.push(item.studentUserId);
      arrBO.push(item);
    });

    let arr = [];
    onCheckboxStudent.value.forEach(v => {
      if (pArr.indexOf(v) === -1) arr.push(v);
    });
    onCheckboxStudent.value = arr;

    let a = [];
    checkboxChangeArr.value.forEach(v => {
      if (pArr.indexOf(v) === -1) a.push(v);
    });
    checkboxChangeArr.value = a;

    selectStudentNew.value.forEach(v => {
      if (pArr.indexOf(v) === -1) a.push(v);
    });
    selectStudentNew.value = a;

    let dormitoryArr = [];
    batchMarkData.value.dormitoryRelationBO.forEach(v => {
      if (arrBO.indexOf(v) === -1) dormitoryArr.push(v);
    });
    batchMarkData.value.dormitoryRelationBO = dormitoryArr;
  }
};

// 选择学生信息单选
const onAddRadioStudent = ref({});
const studentUser = ref(false);
// 批量标记住宿学生/选择学生 弹窗
const batchMarking = reactive({
  title: '住宿学生选择',
  visible: false,
  width: '903px',
  iconType: 'default',
  btnState: '确定',
  judge: ''
});
// 获取班级学生列表
function getList() {
  locationPick().then(res => {
    if (res.data.code === 200) {
      classListOption.value = res.data.data;
    }
  });
}
// 批量住宿点击弹窗按钮
const batchAccommodationTap = () => {
  batchMarking.visible = true;
  batchMarking.title = '住宿学生选择';
  batchMarking.judge = '2';
  batchMarking.btnState = '下一步';
  getList();
  // getStudentsList();
  openStudentValue.value = [];
  selectStudentValue.value = '';
  getGradeLists(filterChangeRef.value.sectionList[0], 0);
};
// 单选方法
const stu = ref();
function studentUserChange(e) {
  // console.log(e, '---------------===========');
  stu.value = e;
  formDataCreate.value.className = e.className;
  formDataCreate.value.gradeName = e.gradeName;
  formDataCreate.value.gender = e.gender;
}
const selectStudentNew = ref([]);
// 多选
const onChangeCheckbox = value => {
  // console.log(value);
  selectStudentNew.value = value;
};
const checkboxChangeArr = ref([]);
const aaa = ref([]);
function checkboxChange(data, e) {
  // console.log(data, e, 'dayin');
  if (e.target.checked) {
    checkboxChangeArr.value.push(e.target.value);
  } else {
    data.checkAll = false;
    // console.log(aaa.value.indexOf(e.target.value), 'aaa.value.indexOf(e.target.value)');
    checkboxChangeArr.value.splice(checkboxChangeArr.value.indexOf(e.target.value), 1);
    // checkboxChangeArr.value.filter(v => v !== e.target.value);
  }
  // console.log(e.target.value, 'e.target.value');
  // console.log(checkboxChangeArr.value, '组');
  // console.log(onCheckboxStudent.value, '默认');
}
// 批量住宿确认
const batchMarkData = ref({
  dormitoryRelationBO: []
});
const submitType = ref(true);

const onSubmitBatchAccommodation = async () => {
  let checkboxChangeArrs = [...new Set(checkboxChangeArr.value.map(x => x))];
  if (checkboxChangeArrs?.length || onAddRadioStudent) {
    if (batchMarking.judge === '1') {
      if (stu.value?.classId) {
        formDataCreate.value.classId = stu.value.classId;
        formDataCreate.value.name = stu.value.name;
        formDataCreate.value.gradeId = stu.value.gradeId;
        formDataCreate.value.studentUserId = stu.value.studentUserId;
        formDataCreate.value.gender = stu.value.sex;
        formDataCreate.value.studentAvatar = stu.value.studentAvatar;
        onChangeClass(stu.value.classId);
        formDataBatchStudentList.value = [];
        onAddRadioStudent.value = {};
        stu.value = {};
      } else {
        message.error('请选择学生');
      }
    } else {
      batchMarkData.value.dormitoryRelationBO = [];
      formDataBatchStudentList.value.forEach(elem => {
        if (elem.people && elem.people.length) {
          elem.people.forEach(item => {
            checkboxChangeArrs.forEach(data => {
              if (item.studentUserId === data) {
                batchMarkData.value.dormitoryRelationBO.push(item);
              }
            });
          });
        }
      });
      let classIdArr = [];
      batchMarkData.value.dormitoryRelationBO.forEach(item => {
        if (item.sex === '1') {
          item.gender = '男'; // 学生性别
        } else {
          item.gender = '女';
        }
        classIdArr.push(item.classId);
      });
      if (batchMarkData.value.dormitoryRelationBO.length > 0) {
        if (submitType.value) {
          submitType.value = false;
          if (!submitType.value) {
            // await batchMark(batchMarkData.value).then(res => {
            //   if (res.data.code === 200) {
            //     message.success('批量标记成功');
            //     batchMarkData.value.dormitoryRelationBO = [];
            //   } else {
            //     message.error(res.data.msg);
            //   }
            // });
            getStudent(1);
            classIdArr = [...new Set(classIdArr)];
            // console.log('qnmdb', checkboxChangeArrs);
            // console.log('qnmdb', selectStudentNew.value);
            router.push({
              path: '/admin/classInfo/distributionDeta',
              query: {
                id: JSON.stringify(classIdArr),
                studentUserId: JSON.stringify(checkboxChangeArrs)
                // studentUserId: JSON.stringify(selectStudentNew.value)
              }
            });
            batchMarking.visible = false;
          }
        }
      } else {
        message.error('请选择标记学生');
      }
    }
  } else {
    message.error('请选择标记学生');
    return;
  }
};
// 批量住宿取消
const onCancelBatchAccommodation = () => {
  batchMarking.visible = false;
  openStudentValue.value = [];
  selectStudentValue.value = [];
  formDataBatchStudentList.value = [];
  onCheckboxStudent.value = [];
  btnLoading.value = false;
  batchMarkData.value.dormitoryRelationBO = [];
};
// 批量住宿获取班级学生信息
const onClickBatcAccommodation = ({ item, key, keyPath }) => {
  onCheckboxStudent.value = [];
  // ------------------------------
  checkboxChangeArr.value = [];
  // console.log('ssssssssssssssss');
  // console.log(formDataBatchStudentList.value);
  // selectStudentNew.value = [];
  getStudentListByClassId(item.value).then(res => {
    if (res.data.code === 200) {
      formDataBatchStudentList.value = res.data.data;
      formDataBatchStudentList.value.forEach(item => {
        item.checkAll = false;
        if (item.people) {
          item.people = item.people.filter(i => i.studentStatus === undefined);
        }
      });
    }
  });
};

/** ************************************************************************************/

// 温馨提示
const tip = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default'
});
// const exchange = reactive();

// const value = ref(1);

// 表单查询
const formRef = ref();

// label样式
const labelCol = reactive({
  xs: { span: 10 },
  xl: { span: 10 },
  xxl: { span: 6 }
});
const wrapperCol = reactive({
  xs: { span: 24 },
  xl: { span: 24 },
  xxl: { span: 24 }
});

const type = ref();
// 学校年级班级 三级筛选 ref
const filterChangeRef = ref(null);
const setPrimaryColor = computed(() => store.state.user.primaryColor);
const backgroundColorValue = computed(() => getRgba(store.state.user.primaryColor, 0.1));
</script>

<style lang="less" scoped>
@import './index.less';

// .top {
//   background: var(--van-primary-color-web);
// }
.descriptionsItemStyle {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto 0;
}

/deep/.micro-dormitory-select-arrow {
  top: 40%;
}

input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 2px 5px 0 0;
  background: transparent;
  border: 1px solid gray;
  -webkit-appearance: none;
  vertical-align: middle;
  margin-top: 0;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  min-height: 16px;
  min-width: 16px;
  position: relative;
  cursor: pointer;
}

input[type='checkbox']:checked {
  // background: #d6aa56;
  background: var(--van-primary-color-web);
  border: none;
}

input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 3px;
  transform: translateX(-50%);
  // transform: translate(-50%, -50%);

  background: transparent;
  border: #fff solid 2px;
  border-top: none;
  border-right: none;
  height: 6px;
  width: 10px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.fileListStyle {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; //行数
  -webkit-box-orient: vertical;
}

/deep/.micro-dormitory-select-selection-item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 5rem !important;
}

/deep/.micro-dormitory-popover-inner {
  width: 146px;
}

// /deep/.micro-dormitory-cascader-menu {
//   white-space: nowrap !important;
//   overflow: hidden !important;
//   text-overflow: ellipsis !important;
//   width: 270px !important;
// }
/deep/.micro-dormitory-cascader-menu-item-content,
/deep/.micro-dormitory-cascader-menu-item,
/deep/.micro-dormitory-cascader-menu-item-expand {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 270px !important;
}

.info-content {
  /deep/.micro-dormitory-checkbox-wrapper {
    display: flex;
    align-items: center;
  }
}

/deep/.micro-dormitory-menu-item {
  overflow: visible;
}

/deep/.micro-dormitory-menu-title-content > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
}

.dormitory {
  /deep/.micro-dormitory-menu-title-content > span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 150px !important;
  }
}

/deep/.micro-dormitory-tooltip-inner {
  max-width: 140px;
}

/deep/.micro-dormitory-cascader-picker:hover .micro-dormitory-cascader-picker-clear {
  color: rgba(0, 0, 0, 0.25) !important;
}
.icon-btn-box {
  display: flex;
  align-items: center;
  .icon-btn {
    margin-right: 9px;
  }
}

.dialog-max-height-userinfo {
  // border: 1px solid #f00;
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

:v-deep(.content) {
  .micro-dormitory-menu {
    width: 220px !important;
  }
}
</style>
